Similar to Google Images Expander - Ajax
Branch: master
Clone or download
Latest commit 7afc8e5 May 31, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
api Fix #1 Feb 20, 2015
css Updated CSS Feb 25, 2015
images New demo Feb 11, 2015
js Fix #1 Feb 20, 2015
.gitignore Fix #1 Feb 20, 2015
LICENSE Initial commit Apr 7, 2014
README.md Update README.md May 31, 2016
demo.php Updated CSS Feb 25, 2015

README.md

Gridder Ajax

Buy Me a Coffee at ko-fi.com

Version : 1.0

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

VIEW DEMO : http://www.oriongunning.com/demo/gridder-ajax/demo.php

Too complicated? You can use this static version: https://github.com/oriongunning/gridder

Get Started

Include

<link href="css/gridder-ajax.css" rel="stylesheet">
<script src="js/gridder-ajax.js"></script>

The Markup

<div class="gridder-list">
	
  <li class="item  item_1 do-expand-item">
    <a href="item_4" title="Item 4" class="link">
      <img src="http://lorempixel.com/300/200/food/?date=6">
      <span class="title">Item 4</span>
      <span class="description">A small Description</span>
    </a>
    <span class="selectedBox"></span>
  </li>
  
</div>

Fire it up

<script>
    jQuery(document).ready(function ($) {

        // Call Gridder Ajax with
        // default options

        $('.gridder-list').GridderAjax({
            scrollOffset: 0,
            rootUrl: "/",
            animationSpeed: 600,
            animationEasing: "easeInOutExpo"
        });
    });

</script>