Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

Custom mini image gallery, made with jQuery

September 30th, 2013
Categories: Blog, CSS, Development, Hand coded, HTML, jQuery, Plugins | Tags: , , , , , , , , ,

[ 20/11/2013 UPDATE: This is now responsive and available here ]

This is a short tutorial on how I created the mini gallery, seen after clicking the large image, on LuxDeco’s Discover page. I’ve been asked to write up how I created the gallery as part of another tutorial found here. I recommend reading through the tutorial on how to get the whole grid setup before continuing with this article, just so you’re up to speed and don’t get lost with code examples I use.

To start with I’ll create a demo of the actual gallery and thumbnails to show you how it works. I’ll then show you where I used the code. This way you’ll have the demo and will be able to take it across to your site line by line and implement how you need it.

Here’s the demo:

The code can be easily taken the JSFiddle above or from below:

THE HTML

THE JAVASCRIPT

THE CSS

Now to transfer this in to the tympanus tutorial I pretty much took the HTML line by line in to the tutorial and swapped out the image. It was very simple to insert the new code. You’ll notice there really wasn’t much to do except wrap the current HTML with the new HTML.

The previous code:

My new code:

That should pretty much do the trick for you. You’ll need to ensure that you’ve got jQuery pulled in as per normal.

I created the LuxDeco Discover page with this tutorial too. It was built with Magento providing the content for each preview. Initially this was a little to pull off but it fell in to place in the end with the use of jQuery and a lot of appends and data-attributes.

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

[ 20/11/2013 UPDATE: This is now responsive and available here ]

  • george

    HI! I noticed that your content from og-expander is generated from html, and in the tympanus tutorial its generated from javascript, did you manage to make it with html?
    Thanks!

  • Kam Banwait

    slightly confused on what you mean. Do you mean the content as in the images used as they’re added in via HTML?

  • Matt

    Kam, What you did with LuxDeco is almost exactly what I’m trying to achieve on my current project. I’m interested in how you altered the source to get a fixed height on your expanding box and offset the preview image’s position for the height of the main navigation.

    Any pointers would be greatly appreciated.

  • Kam Banwait

    Hi Matt, thanks for the comments 🙂

    The height is already set to a fixed height, check out:
    settings = {
    minHeight : 620,
    speed : 350,
    easing : ‘ease’
    };

    The offset is done with adding padding in the CSS to ‘.og-expander-inner’, e.g:
    ‘padding:20px 0 15px;’

    That should do the trick for you

  • Jen Schmidt

    I used your gallery tutorial. Got that to work and wanted to add this into the expanded part, but the html code is different in this then in the gallery tutorial. It won’t work as you indicated above. The other poster mentioned some was in js in the gallery tutorial and this one is in the html. Can you give us all the files for the gallery and this included in it?

  • Kam Banwait

    Ah, I see what I’ve missed out, I think. From what I can see, I just checked quickly this morning, I’ve missed out where the JS reads the REL attribute and creates the elements in the JS. I’ll update the post as soon as possible with a zip/rar file for you to download. Some tidying up in the code is required before I can upload it

  • Jen Schmidt

    thank you.

  • Kam Banwait

    Just to let you know that I’ve got a working version of the Grid up now. I’ll be looking to post it up tonight for you 🙂

  • Kam Banwait

    Hi Jen, I’ve posted the updated code and working examples for you here : http://scriptedpixels.co.uk/thumbnail-grid-with-expanding-preview-and-mini-gallery/

  • Kam Banwait
  • Pingback: Stephen()

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd