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 ]

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