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!

  • Gerry Mtz

    Hi! Great work! I’ve seen you added video support (which is the feature I was looking for) but it doesn’t appear in the downloaded file!

    I’m new to programing if you could help me i would appreciate it!

  • Kam Banwait

    Ah yes, sorry, I didn’t update the code. I’ll update when I can this weekend. You can grab the code by viewing the source though
    K.S.Banwait
    Creative Developer
    scriptedpixels.co.uk

  • Trevor Vieweg

    Hi! This is fantastic and very helpful, thanks for the tutorial!

    I am wondering if it’s possible before initializing the expander to read how many thumbnails are listed in the html, and initialize the appropriate amount of small images. Do you know how I would go about this?

    Thanks so much for the great tutorial!

  • Kam Banwait

    I’m not too sure on what you mean about initialising the amount of small images?

    You can possibly use jQuery to read the number of elements in the grid. Once that’s complete you can then run a function that will initialise your images?

  • Kam Banwait

    Something like ‘ .length ‘ will count the items for you

  • Jorge Garcia

    I’d like to know how to get rid of all the margins to make this kind of thumbnail gallery with 100% width. It’s like there is a 3 pixels margin I can’t find. Thanks

  • Kam Banwait

    Do you mean the margins set on each thumbnail?

  • poisontonomes

    Is there a way I can get this to work with WordPress? I can’t seem to get it working

  • poisontonomes

    Scratch that, I’ve got it working. Now, is there a way I can include Fitvid with it when I’m running videos?

  • Kam Banwait

    hmmm .. I guess you can possibly run the fit vid call in jQuery when the preview function is called? You’ll want to make sure it’s called at the very end, when content is loaded in, to make sure it get’s the correct class/ID of the video element to apply FitVid’s magic

  • Kam Banwait

    If you look for this in the CSS files “.og-grid li” and remove the margins applied. That should fix it for you. If you find that there’s a gap in-between the images then you’ll need to apply the little CSS hack where you add between each ‘li’ in the HTML.

  • 28lemons

    Thank you so much for this. This has helped me learn how I can modify this to my needs. BUT, I still have a nagging problem. Do you know how would I modify this so that the expanding preview can be dynamic in height depending on content, as opposed to a set height? I’ve seen the question asked a lot on the original tutorial, but no answer.

  • snapDecision

    Hi Kam, amazing work. I was wondering if you would know how easy/difficult it would be to implement if the thumbs went away and it used an arrow/dot navigation carousel approach that also allowed you to swipe on mobile?

  • Kam Banwait

    I don’t think it’ll be difficult to do. You’ll need to use something like bxslider for the carousel to work on touch properly on touch devices ( just something I’ve used in the past ) and then swap out the code with what bxslider needs. The call for initialising the slider will need to be triggered when the preview pane is opened.

  • Patricia

    Hi Kam – your posts are very helpful and your work is terrific! I’m trying to implement a version of the Codrops thumbnail grid and did not see an answer to this question in their comments string: Is there a way to have more than just a paragraph as the data-description field – I need to have paragraphs, unordered lists and text with links as well in that area. I am new to Javascript and do not know how to change the Javascript entry which is currently set to just p tags. Is there a way to accommodate this? Also – is there a way to change the “Visit Website” verbiage in the link for each expanded item so that it is unique to each entry? For instance, “Read More…” for the first item, “More Information…” for the second, and so on? Thanks in advance for your assistance!

  • cerealkiller

    Hi poisontonomes, how’d you managed to get it working with WordPress? I’ve been trying and it’s driving me nuts!! I’ve replaced all the $ with jQuery and it got rid of the “Grid.init() is undefined” error but my expanded section is still not showing… =(

  • Jordan Nicholson

    Hi Kam, Great tutorial. Im just having one problem. when I click on the image, it expands but then when I go to close it the page doesn’t close back up and stays expanded. Just wondering if you knew what was up or whether or not I was missing something?

  • Hi Jordan, this has happened before to me from the tutorial that I’ve extended on. From what I can remember, the issue is to do with the JS. I’m sure I fixed it in this version, are you using the JS from this demo or the original from the tympanus site?

  • Abigail Hack

    Hi this is amazing thank you so much, easy to digest to!

    I was just wondering if theres a way i can change the part that says “visit the website” in the preview box when opened? as i’d want to link to another page rather then another website?

  • Hi Abigail, thanks for the kind words 🙂

    Yep, it’s possible to change this text. (I’m quickly replying on the road) You can search for that text in the JS file and change it to what suits you best. This fix will change it for all preview areas.

    If you want it to be different for each area then there’s a little more work to be done but it’s not any different to how it brings in the images at the moment. We just add a new data-attribute in the HTML and then add it in to the JS as we do with image data 🙂

  • Abigail Hack

    Ahh i found it! Thank you for replying on the go to! 🙂

  • Jordan Nicholson

    Hi Kam, been busy working on some other stuff. I have been using the JS from the tympanus site. Should I use the one from this demo?

  • I think it’s worth trying the one from my demo. Just save the tutorial one and see if my one has the same issue. Sorry for the vague reply, current;y trying to juggle a lot of work at the moment 🙁

  • Jordan Nicholson

    Hi Kam, Thanks for the help, the demo from this site works. 🙂

  • Luca

    Hi, very nice work, greetings. I have some problems cause I want to insert a div containing an inside my expanding preview but it doesn’t work. ( the data tag doesn’t allow me to put inside it ul, li, anchors or other things )
    Do you have some ideas? how can I do?
    thank you so much

  • emenches

    Hi, I’m using the Codrops code and was wondering how I can add sub categories to the grid. I have my html organized into . I want these classes to be able to sort the grid. Is this at all possible? Thanks

  • mrleonharris

    hi Kam,
    great tutorial/code by the way.

    i have a quick question that may/may not lead to me using this on a project:
    is it possible to deep link to an expanded post?
    thanks again for any help.
    Leon

  • Pingback: Desarrollo | Pearltrees()

  • kundan Singh

    Thank Kam but…why I am unable to download your code and get stuck with adds

  • Sorry – the hosting company I used for the download has shut down or deleted the link … I will upload again soon 🙂

  • Kundan Singh

    Hi kam I keep coming daily to your website to check for correct download link . But it is still not working. Pls update your download link. Also pls help as how can I get a click event. $(“body”).on(“cliick”, “#og-grid li”, function(){…..ajax…}); I need to send a ajax request to get some things to display in expanded box.

  • Hi, I’ve just added a new link for downloadable files.

    You want to load something in, via ajax, when a thumbnail has been clicked? I would recommend just adding the event on to each #og-grid li in JS as a function, like this

    $(‘#og-grid li’).live(‘click’, function() {
    // do something
    });

  • I’m not too sure what you mean … where would you want the link to be?

  • Kundan Singh

    Thanks Kam for your response….if possible pls change the above link to tinyupload also.

  • Tofanelli

    Hey man!!! Very nice job done here! This is almost exactly what I need…. is there a way to remove the thumbs and replace it by a bootstrap carousel, for example?

    cheers =)

  • Cheers 🙂

    There should be a way to do that. Can you show me, through a rough drawing, exactly what you’re looking to do?

  • Tofanelli

    hey Kam… i posted the reply twice and they aren’t here…. they were deleted or didn’t you get them?

  • sorry mate, I forgot to reply & approve them via Disquss. Been a little too busy at the moment to have a look in to all of this. I’ll try and check out your last reply and get back to you asap!

  • Tofanelli

    swell… dont worry… i know everyone is busy…. i just didnt know if i need to send you the link again or not…. but is ok… whenever you be able to take a look it will be great =)

  • Tofanelli

    Hey Kam! How’s going? Hope ok…. May I ask a 4th option? Can you do a mix between the 3 options? Where we will see a nice thumbnails from “thumbGallery” and fixed description from “thumbGalleryGrid” with the layout of “thumbGalleryGridV2”? Sorry to ask for this, but this it will be more neat (I guess)…. or can you help/lead how to do this?

    Thanks =)

  • Howdy there! I too stumbled on this through the Tympanus website. I have things working decently in WordPress at this point, but I’m trying to add an image gallery and not having a lot of luck. I can get the images loaded, but they appear outside of the expander instead of inside of it. I’ll be going through your code to see how I can adapt it. I’m fairly new to javascript & jquery so it’s been quite the process! LOL

    A couple more items I’d like to be able to manage if you have any direction you can give:

    1. How can I set the number of items to show at any one point? I have it currently set up as a shortcode that lets me specify 2, 3 or 4 columns. But ideally I could set it to display a certain number of items, and then have a “load more” button to load more items.

    2. Would it be possible to create an if/then that would allow me to display items only from specific categories on a particular page?

    3. Finally… I need to display the_content with the paragraphs and formatting from the custom post type instead of having all the html stripped out. Could you point me in the direction I need to look to solve this? Ideally, if I put in a WordPress image gallery it would actually display the gallery instead of the shortcode! LOL

    Yes, I’m asking for a lot. So sorry. I’m wanting to learn to do this, but I need some direction.

  • Hey Laura, it’s been a while since I last looked at this and I’m already disliking my own code 🙁 I will have a look through your whole message as soon as I get a chance this week and possibly look at creating something along the lines of what you’re after.

    I’ve been told that some part of the demo no longer works – not sure why – but I’ll try and fix it.

    Currently re-organising my website so apologies in advance if something goes down/missing while you’re browsing in the upcoming week or near future.

  • Wow. Quick response. Thanks! No worries. And I understand how it is to come back to old code and realize that you’d now do things differently and more efficiently. It’s all part of continuing the learning process!

    The only thing I’ve noticed not working on the demo is one area with broken images. Otherwise, I think it’s working fine.

    I’ll eagerly look forward to your guidance on this.

  • Hi Laura,

    sorry this has taken so long. I’ve had a bit too much on my plate with work at the moment.

    I’ve managed to dig this out from my demos offline. Is this along the lines of what you’re looking for? http://scriptedpixels.co.uk/playground/thumbgallerygrid/thumbGalleryGridV2.html

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