jQuery Tools image gallery with expanding thumbnails

5 min read
demo download

jQuery Tools is my favourite UI library. There are certain things that it doesn’t try and do, but what it does do, it does well. I built this gallery as more of an example of how flexible jQuery Tools components can be. Imagine you have a website that needs a jQuery tab system, and then later the client says “oh and can you please add a thumbnail gallery to the sidebar”. You can now simply use the jQuery Tools Tab plugin to create the gallery, rather then writing another 30 lines of code. So in this case, you are actually being more efficient by using a plugin, rather then less efficient. The Tabs plugin on it’s own is only 3kb anyway, so it’s hardly a deal-breaker considering what it can do. I extended the gallery to allow for the thumbnails to “expand and collapse”.

The first thing to note is the pure javascript method of changing the ‘no-js’ class in the HTML tag. The fact that it doesn’t rely on the jQuery library to work, means it will work much quicker and can be loaded in the head of the document, and allow you to keep the rest of your javascript in the footer. This will prevent the page styling jumps that you often get from your ‘no-js’ styles:

Pure javascript ‘no-js’ class manipulation

HTML

The HTML is pretty straight forward. An unordered list houses the thumbnails, and the main images are just stacked into a DIV above thumbnails list. The thumbnails are wrapped in anchor tags, and the href attribute of each thumb is matched with the id of the main image that it corresponds to. This, along with some CSS, is how we’re able to get the gallery to work with javascript turned off.

CSS

I won’t go through all the CSS, but here are some of the most important parts –

The div containing the main pics must have a position:relative and an overflow:hidden. This is because the main images inside this div need to be positioned absolutely. This is how jQuery Tools tabs need to be setup. You’ll find that you have problems with cross-fading etc if you don’t position it like this.

The next bit of CSS I’ll point out is the grid system for laying out the thumbs. Big credit to Harry Roberts for this really clever technique. I’d recommend going onto his site to read about how this works.

Lastly, here is the CSS that gets the gallery working in no-js mode. We just change the positioning of the main images from absolute to relative. We then also need to hide the “show more” button because there’s is obviously no need for it with js turned off.

javascript

Firstly, don’t forget to include the jQuery and jQuery Tools tabs libraries at the bottom of your page. Here is the js that gets the gallery setup, and then deals with the expanding and collapsing thumbnails –

 

 

Contact


Want to work with me or the Lab19 team? Great news! Reach me using the relevant links below: