Need help with gridder?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
oriongunning

Description

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

446 Stars 129 Forks 134 Commits 19 Opened issues

Services available

Need anything else?

jQuery GRIDDER 1.4.2 Buy Me a Coffee at ko-fi.com unheap CDNJS version

Gridder Example

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

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

  • Demo GRIDDER v1.4.0 : https://oriongunning.github.io/gridder/
  • Alternative Demo : httsp://www.oriongunning.com/demo/gridder

=======

Alternative version of Gridder that support html 5 pushstate (REQUIRES SERVER KNOWLEDGE)

Live demo GRIDDER v2 : https://www.oriongunning.com/demo/gridder-ajax/demo.php - Github link for V2 : https://github.com/oriongunning/gridder-ajax

=======

NEW

*24 June 2015 You can now load content via ajax. Simply replace the #ID with an URL.

=======

FEATURES

  • Multiple instances
  • Really easy to use and customize
  • Expanding preview with details
  • Smooth Scrolling
  • Callbacks (so you can launch other plugins)

Coming soon ...

  • Hot Linking

=======

Usage

  1. Include jQuery:

    
    
  2. Include plugin's code:

    
    
  3. HTML

    
    
       <!-- You can load specify which content is loaded by specifying the #ID of the div where the content is  -->
      <li class="gridder-list" data-griddercontent="#content1">
          <img src="https://placehold.it/600x400">
      </li>
      <li class="gridder-list" data-griddercontent="#content2">
          <img src="https://placehold.it/600x400">
      </li>
      <li class="gridder-list" data-griddercontent="#content3">
          <img src="https://placehold.it/600x400">
      </li>
      
      <!-- You can also load html/ajax pages by replacing the #ID with a URL -->
      <li class="gridder-list" data-griddercontent="/content.html">
          <img src="https://placehold.it/600x400">
      </li>
    Content goes here...
    Content goes here...
    Content goes here...
  4. Call the plugin:

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.