EveraldoReis / gridder

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

jQuery GRIDDER

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

• Live BASIC demo GRIDDER v1.3.0 : http://www.oriongunning.com/demo/gridder/basic.php
• Live ADVANCED demo GRIDDER v1.3.0 : http://www.oriongunning.com/demo/gridder

=======

NEW Live demo with GRIDDER v2

Live demo GRIDDER v2 : http://www.oriongunning.com/demo/gridder-ajax/demo.php

• Github link for V2 : https://github.com/oriongunning/gridder-ajax

=======

FEATURES

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

Coming soon ...

• A new theme!

=======

Usage

1. Include jQuery:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

2. Include plugin's code:

   <script src="dist/jquery.gridder.min.js"></script>

3. HTML

   <!-- Gridder navigation -->
   <ul class="gridder">
       <li class="gridder-list" data-griddercontent="#content1">
           <img src="http://placehold.it/600x400" />
       </li>
       <li class="gridder-list" data-griddercontent="#content2">
           <img src="http://placehold.it/600x400" />
       </li>
       <li class="gridder-list" data-griddercontent="#content3">
           <img src="http://placehold.it/600x400" />
       </li>
   </ul>
   
   <!-- Gridder content -->
   <div id="content1" class="gridder-content"> Content goes here... </div>
   <div id="content2" class="gridder-content"> Content goes here... </div>
   <div id="content3" class="gridder-content"> Content goes here... </div>

4. Call the plugin:

   <script>
   $(function() {
   
       // Call Gridder
       $('.gridder').gridderExpander({
           scroll: true,
           scrollOffset: 30,
           scrollTo: "panel",                  // panel or listitem
           animationSpeed: 400,
           animationEasing: "easeInOutExpo",
           showNav: true,                      // Show Navigation
           nextText: "Next",                   // Next button text
           prevText: "Previous",               // Previous button text
           closeText: "Close",                 // Close button text
           onStart: function(){
               console.log("Gridder Inititialized");
           },
           onContent: function(){
               console.log("Gridder Content Loaded");
           },
           onClosed: function(){
               console.log("Gridder Closed");
           }
       });
   
   });
   </script>

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