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

Thumbnail grid with expanding preview and mini gallery

November 19th, 2013
Categories: Blog, CSS, Development, Hand coded, HTML, jQuery | Tags: , , , , , , , , , ,

After being asked many times, via this tutorial and emails, how I created the LuxDeco Discover page I decided to finally create my own version of the Grid for you to download.

I’ll aim to keep this short because most people just want the answer and I don’t have too much time on my hands at the moment, hence the lack of posts.

I’ve got a working example here. You can also download the code from this link.

To show you what the structure of the new mini-gallery I drew at the image below. It may not be as clear as it could be but I think it’s a good rough outline.

IMG_0302

THE GRID MODIFICATIONS:

I started off with editing a few bits of the Grid JavaScript first. I’ve included comments in the ‘grid.js’ file and I’ve pasted some key parts below. The changes start from line 341 in Grid.js:

What I’ve basically done it set up all elements and then appended them to the relative wrapping containers. I’ve then appended the wrapping containers to the large container. It’s written backwards as I need to ensure I’ve declared the to-be-appended items before appending them to any other elements.

The next step is to get all the data from the clicked image. This clicked image contains A LOT of data. It has our title, copy, href’s and our image paths.

At the end of the ‘update’ function we make a call to our Preview initiator function this.PreviewGallery();. This brings in our image gallery jQuery code. We have to call this in at this, last, point of the ‘update’ function to let jQuery find the DOM elements and bind our ‘onclick’ function.

THE HTML STRUCTURE FOR EACH GRID ITEM:

For each grid item I’ve had to include some extra data-attributes. These hold the thumbnail paths as well as our URL’s.

Once you’ve edited the grid elements as needed you’ll need to fire it all up within the DOC READY function:

You can see it all in action here. You can also download the code from this link too!

Hope it’s of some use to you all! Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

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