ORIONGUNNING     Frontend Developer

Thumbnail grid expanding preview


Thumbnail grid expanding preview JQUERY plugin

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

Buy Me a Coffee at ko-fi.com

We have all searched images on Google, so you probably noticed the interesting expanding preview when you click on a thumbnail. It’s a very nice effect and practical, allowing you quickly see more details without having to reload a new page.

This plugin allows you to recreate a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link

Gridder V1

DEMO : http://www.oriongunning.com/demo/gridder
GITHUB : https://github.com/oriongunning/gridder


Gridder V2

DEMO : http://www.oriongunning.com/demo/gridder-ajax
GITHUB : https://github.com/oriongunning/gridder-ajax






  • Anjan

    your plugin works fine . but if have to use the same plugin twice on the same page its doesn’t work that way, can you plz help me out .

    • admin

      Hello.

      No, at the moment it’s not possible unless you make some changes to the JS.

      I’ll update the JS to allow that as soon as i have some time.

      Cdt,
      Orion

  • krimmy

    can i align image vertically center in the gridder show class ?

  • JatZ

    How can I make the expanding and closing animated?

  • admin

    Hello guys,

    Animated closing/ opening can be added quite easily by adding a slideToggle() to the script.

    Vertical align is always tricky but can be added via css and jquery.

  • JatZ

    Can’t seem to get the slideToggle() to work. It always “jumps” at the end. I’ve been trying to google an answer, but with no luck. I’m a newbie when it comes to query. Can you help a fellow out?

  • krimmy

    i m not able to align images in center vertically when the grid expands….. images are of variable size.

    Can u pls make sumthn and post it our here

    • admin

      Hello Krimmy.

      I don’t really have the time to work on that at the moment, but there lots of other plugins out there you can used to achieve vertical centering.

      Just fire that plugin after the content has expanded and you will be fine.

      Regards,
      Orion

  • admin

    Jatz, go check out my github page, https://github.com/oriongunning/gridder. I’ve updated the plugin, it’s now has basic animation with slideDown and fadeIn.

    • JatZ

      Thanks mate! Though it only slides down the first time and after that it only fades. It would be cool to see it close by sliding up, or sliding to the right height if a object from the same row is clicked. But again thank you so much you for doing this much! appreciated!

  • krimmy

    Heyy Orion,

    I am very new to jquery and i do not have any idea abt what u r talking. But it would be great if somebody can help me with this.

    • oriongu

      Do you have a link so I can actually view your project?

  • krimmy
  • Riccardo

    Hello!!

    Very useful code!
    My js & jquery experience is very low, but I’m trying to understand and learn.
    I was trying to set a different background for each image, but without success. I guess I have to add a “data attribute” for the background-img to ‘gridder’ in the js code. But I cannot understand how to get it done… Any suggestion?
    Thanks!

    • oriongu

      Hello Riccardo,
      There are different way’s of doing that. But none that are included in this plugin yet. You could try to add a unique class to the .gridder-show container via JS, and then assign you background image via CSS.

      • Riccardo

        Thanks for the reply!

        That is what I am trying to do… But unfortunately I am not so good with js…
        I wrote this:
        var gridder = $(‘ ‘).addClass($(this).data(“bg”));
        which is probably impossible code… “bg” comes from my html file and has been caught with:

        inside my css I have the .01, .02, .03 classes defined.
        Obviously it does not work. Any idea? -_-

        Regards,
        Riccardo

        • Riccardo

          I solved with a different approach.
          I wanted to put the name of the class through a data attribute, but i was not able. So I added a generic “bg” class to the div and in the html I added the same rule for each image in the list like this:

          .bg {background-image: url(“01.jpg”)}

          This appears to be working on a recent browser. Older ones wont visualize the bg. Not that bad… 😉
          Many greetings from Italy!

          • oriongu

            Glad you solved the problem on your own (only way to learn). However, there are much better way’s of doing this. I’ll update the plugin when I get time to allow this. As soon as I get some time… :)

          • Riccardo

            You never stop learning… 😉

  • Luca

    Hi, very nice script, congratulations.

    I have a big problem:
    When I try to put Unordered Lists, List and Anchor Tags in .gridder-content, they won’t appear.
    Gridder-content seems that only accepts paragraphs and title tags (h1,h2 etc).

    Any suggestion?

    • suniel

      try removing font-size:0; from .gridder & .gridder-show .
      Worked for me.

  • emostoyanov

    Awesome! Now, if i would like to add more functionality and to be able to link gallery from outside and load it with an expanded item that is specified in the URL, what would be your advice? How to change/extend the code? I presume this will be possible only with the Ajax version of the gallery?

    • oriongu

      Hello, Yes, the Ajax version is a better way of doing it.

      You can add a gallery in the expanded bloc by calling your WhateverGalleryScript after the content has expanded. (It will not work if you call it before has the content does not exists yet…)

      Example: If you have the appropriate markup in the expanded area, at line 55 of the gridder.js file, just call $(‘.carousel’).carousel();

      The above example is only for Bootstrap 3 Carousel, but most script follow the same patterns.

      Let me know how you go :)
      Cheers, Orion

  • duvahazard

    Hello, thanks for the script. I wanted to know, for the non-AJAX version, how could I activate a specific tab automatically. Currently I have to click on a tab to expand one but would be great to be able to expand one in particular. Couls it be that I would have to integrate the AJAX version and this cannot be done? Thanks!

    • oriongu

      Hello, Yes, you can load a specific “tab” on page load like this.
      $( document ).ready(function() {
      $(‘.gridder-list:nth-child(1)’).trigger(‘click’);
      });

      if you want to attach a button to a tab
      $( document ).ready(function() {
      $(‘.button’).on(‘click’, function(){
      $(‘.gridder-list:nth-child(1)’).trigger(‘click’);
      });
      });

      Does it make sense to you?

      Cheers,
      Orion

      • duvahazard

        This worked like a charm! Thnaks a lot, now when I enter a page, the first tab always expands. Now, how could I, from a different page, have an “a href” link or other kind, to another page with gridder and have a specific tab open, like sending the tab number by URL or similar? Thanks again and thanks a lot for your help.

  • GDemian

    Hi, tnx for this script. It’s really nice!!
    In the AJAX version It’s possible to open a specific tab from another page?

    I try to explain:
    I have a product list on a page (products-list.php) and another page formatted using gridder ajax (products-grid.php)
    i’d like to click on links on products-list.php page and be redirected to products-grid.php page opening automatically the right tab.

    any suggestion?

    thank you!

    • oriongu

      Hello,

      I’ve updated the script so it now support direct linking.

      The downfall is that it’s a bit more complicated to understand.

      You can direct link to an item like this for example : http://www.oriongunning.com/demo/gridder-ajax/demo.php?item=item-006000

      Let me know if that fixes your problem.

      Regards,
      Orion

      • GDemian

        Hi Orion, thank you so much!! great!!
        The only things that doesn’t work is the scroll to the correct slide.
        But maybe it’s only a configuration?

        i will work around!!
        thank you

        • oriongu

          Hello, I’m glad it’s all working. I’ve updated the GITHUB with a few fixes. Scrolling to correct slide should be working now.

          • GDemian

            Great, thank you so much!! 😀

          • GDemian

            i suggest a little modification. gridder-ajax.js at line 65 substitute
            var thisTitle = $(‘.’+thisUrl).find(‘.title’).html();
            with
            var thisTitle = $link.attr(‘data-id’);

            in this way you don’t use title attribute but data-id attribute and you be free to use title attribute as you like :)

          • oriongu

            I did not do exactly what you suggested, but you were right, it needed improvement :) (github updated)

  • Pingback: New Demo for GRIDDER powered by AJAX | Front End Developer | Orion Gunning()

  • Sachin

    Hi Thanks for the Script!
    In Gridder V1 can i have scroll to particular Open instead of having scroll to that, so that open is focused.
    Like this
    http://www.mvp-interactive.com/our-work/

    • oriongu

      Hello. I’ve updated the script with a few improvements. Check out the updated demo.

  • Sachin Chhabra

    Hi oriongu !
    Thanks for such quick feedback, I really appreciate that.
    Is it possible to do something like this when we close it.
    check link here: http://www.mvp-interactive.com/our-work/
    as open work really well but close of the expanded version is kindly leave the screen where it is..

  • Sachin Chhabra

    Thanks for the help: i am using Gridder V1
    I am using visual composer gallery in both page mentioned below,
    The problem is when using visual composer gallery in your content area it is not working
    it work on when not taken in that content, i think there is some kind of conflict
    Can you help.thanks

    One with gallery inside you content area: http://www.mvp-interactive.com/work-2/

    One with gallery on simple page itself: http://www.mvp-interactive.com/demo-3/

    • oriongu

      I’ll update the plugin as soon as I get some time.

      In the future, please explain your bugs or enhancements by submitting an issue via GITHUB.

      I’ve added the two issues that will fix your problems above and will work on them soon.

  • Nerd

    Wow great script dude!

    I’m having trouble getting this to work in my website. When I add the html to my index page and link to the css file everything seems ok, but when I link to the gridder.js and add the fire script at the bottom of my index page it doesn’t work and it screws up other java on my site. I’m not sure if there is an conflict with other js (old superbox?) or if I’ve added the code incorrectly or if it’s something else. I have very limited experience with java (like, almost none).

    Any help you can provide would be appreciated. I’m sure the solution is something super simple and obvious. Thanks in advance.

    Modified gridder demo: http://wellnesscollectivevt.com/demo.html
    Original full site (w/ superbox): http://wellnesscollectivevt.com
    Gridder in full site (my failed attempt): http://wellnesscollectivevt.com/indexalt.html

    • oriongu

      Hello Nerd,

      Can you try to launch the plugin this way?

      jQuery(document).ready(function($) {
      // Call Gridder
      $(‘.gridder’).gridderExpander({
      scrollOffset: 30,
      scrollTo: ‘panel’, // ‘panel’ or ‘listitem’
      animationSpeed: 400,
      animationEasing: “easeInOutExpo”
      });
      });

      Let me know if that works?

      Thanks,
      Orion

      • Nerd

        Damn that’s what I call a fast reply! Thanks so much.

        I tried the different calling method but the results are the same, unfortunately.

        • oriongu

          No worries. Ok, can now try to update gridder.js? I’ve pushed a new version out on GITHUB that could potentially fix your issue.

          • oriongu

            Oh, and I just spotted the problem.

            Gridder V1 is not standalone, you need to load the script after loading JQUERY…

            Let me know if this fixes it.

            Regards,
            Orion

          • Nerd

            YES! I think that worked. It looks like a total mess but its probably due to all the css I modified. The box expands when clicked now, so I think that’s it. I can’t thank you enough dude. If you ever need any design work (icons, logos, any vector graphics) I’d be happy to repay the favor.

          • oriongu

            Glad to have been able to help. Thanks for your offer, and will gladly accept whenever I have any design work needs :)

          • Nerd

            Awesome! I got it all cleaned up: http://wellnesscollectivevt.com/indexalt.html

            The only other thing I’m trying to figure out is how to get the expanded box to close when the user clicks anywhere on the “gridder-list selectedItem” box.

            Seriously, don’t hesitate to hit me up for design work.

          • oriongu

            That looks much better!

            Add another .gridder-close div, style it up so it covers the whole expanded area except navigation, you can do quite easily with css and you should have what you need.

            Does it make sense?

          • Nerd

            Actually, I misspoke. I want it to close when you click anywhere on the selected items thumbnail box, not the expanded box. But I’m guessing it’s the same deal. So do you mean I add another .gridder-close div to the html or the js? Where exactly does it go? If its in the html, do I put everything in .gridder-list inside the div or do I close it?

          • oriongu

            I’ve added a new version on github that should fixed your problem + a few others.

          • Nerd

            Hmm, that doesn’t seem to change anything either.

            I feel bad asking you to troubleshoot this. If you don’t have time to figure it out it’s all good man.

            EDIT: just saw your most recent comment. I’ll try that now. Thanks again.

  • Istvan

    Hi there! Thanks for your great work. This seems like a life saver to my project. I am a designer and fairly beginner in developing so I thought I ask here if there is a way to have a permalink for each expanded view? Thinking of having a project gallery in there with a possibility of a direct link sharing. I looked at your AJAX version but just seems too advanced for my level to understand at the moment. Thank you :)

    • oriongu

      Hello Istvan.

      There is no real easy way for adding deep-linking with version 1.

      Gridder V2 does it quite easily once you set it up correctly.

      Regards,
      Orion

  • tholar

    Hi, thank you for the script.
    I have implemented the script into Joomla where items are shown through a module. I’m not a coder so I’m facing a problem. Is it possible to prevent the script from scrolling to top of page before is scrolls back to the grid?

    It happens when one item expander is active and I click another item. I have fixed it by wrapping scrollTop: offset with the condition if (!visible), but I was wondering if there was a more appropriate solution.

    • oriongu

      Hello. To be sure, I would have to see the website, but I think I know what you are talking about. This happens when there is not much space underneath the gridder wrapper. For example, if you had padding-bottom : 1000px; to your body tag, your problem should disappear. I will look into it, and fix it and soon as I know how.

      • tholar

        Hi, you are totally right, if I set padding to 1000px the jumping stops. I’m currently working locally on a Mamp server so I can’t show you the website.
        Thank You :)

      • Tholar

        Hi again, this is what I did to solve my problem – not an ideal solution but its enough for my need.

        if (!_this.hasClass(“hasSelectedItem”)) {
        _this.addClass(“hasSelectedItem”);
        _this.css(“padding-bottom”, “580px”);
        }

        and

        function closeExpander(base, settings) {

        _this.removeClass(“hasSelectedItem”);
        _this.css(“padding-bottom”, “0px”);

        }

      • oriongu

        No, it’s not an ideal solution but Thanks Tholar, I’m glad you solved your problem alone! I will fix this in next version along with a couple of other bugs.. :)

  • Brad

    Hi, I’m trying to implement this script in WordPress. I just can’t get it to work. As a test, I’m using the html markup as shown on github but it’s just not working. I’d really appreciate it if you could offer some advice where I might be going wrong please? My dev page is here http://bit.ly/1BSS7Ap

    • oriongu

      Hello Brad. It’s normal it is not working, the example code in the github is wrong. I’ve updated it.
      This is what you need to change : $(“.gridder”).Gridder —————> $(“.gridder”).gridderExpander

      Sorry for that.
      Have a good day!
      Orion

      • Brad

        Thanks man – appreciate that. Is there a way to stop it scrolling down to the expanded content when a thumbnail is clicked.

        • oriongu

          I’ve added an option to disable scrolling.
          Check out the basic demo on the github page.

          • Brad

            This is great – thank you. I’ve actually kept the scroll down now but when I click the next or previous buttons it jumps up and then down again – can you see think why this is happening? http://bit.ly/1BSS7Ap

          • oriongu

            Looks good Brad. Yes, it’s a bug I have not fixed yet : I need to disable scrolling when there is not enougth space under the .gridder. if you add space under it, it will work as intended… Make sense?

          • Brad

            You Sir, are a legend – thanks so much for a great script and awesome support. Appreciate you man!

          • oriongu

            No worries Brad. Have a great day!

          • Brad

            I’m so sorry for another question. When I select a list item in the first two columns, the item to its right will shift over a few pixels. I just can’t figure out how to stop it. See here – http://bit.ly/1BrWeQb

          • oriongu

            Umm, this is something to do with css. Try removing the ending on each item? It should remove the spacing due to display: inline-block.

          • Brad

            That did the trick – thank you again. I shall leave you in peace :-)

  • Jeff

    thanks so much for the NICE script !!!!!!!! can I increase the size of the thumbnails ?

    thanks

    • oriongu

      Thanks Jeff.
      Yes, you can change the size to the thumbnails by using css. In the demo, set them to a fixed width of 150px.
      Are you familiar with CSS?

      • Jeff

        hi;

        thanks for the reply. I know some css. my thumbnail images size are 248*300 and I would like if I could display the thumbnails in that size

        thanks

  • miminiyo

    Thanks for the script !!!!!!!! I have implemented the script without problems but when i tried to implement another script inside “gridder-content”, for example, fancybox or lightbox, these plugins dont work. I have tried 5 or 6 but always happens the same. Any idea? Can exist some kind of conflict? Tranks for your help

    • admin

      Hello,

      Try the updated version on my github acc, it has a new markup and should work better with other plugins.

      You can use the onContent callback to launch fancybox :

      onContent: function(){
      $(‘.fancybox’).fancybox();
      },

      Make sense? Else I’ll make up an example for you :)

      Regards,
      Orion

  • hiphoplive

    Hi OrionG

    What a great script. Something I’ve been looking for for a while. I was also wondering how I could implement it the way you have on your front page – to display news articles in a grid for the school website.

    I’m a novice in programming so I have a very basic knowledge.
    Thank you very much and I look forward to hearing from you.

    Best and great plugin

  • span

    Hey Orion, Nice Plugin! How would I close the expander from a button or scroll position outside of the plugin?

  • Pingback: 55 frais Galerie jQuery et l’image Sliders: Best of 2016 | Mohamed Daoudi – Chef de Projet Web Offshore Indépendant()

  • Tanya

    Hi, prob very simple, but how can I get the text to align to the right of the image when expanded on Gridder V1?

  • Ahmed Muiead El Fadul

    Hi every one, I downloaded the code, and I ran the demo.html file , but I couldn’t use this demo for my own pictures! why? where at each time I click one of my photos, 600*600.png image appear?
    Please any help…