Animated Responsive Image Grid Plugin

Animated Responsive Image Grid is a jQuery Plugin allows you to create a image gallery with grid that can switch images using different animations and timings.

How to Use:

1. Include jQuery library and gridrotator.js on the page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>

2. Call the plugin

$(function() {
             
    $( '#ri-grid' ).gridrotator();
 
});

3. HTML;

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
    <ul>
        <li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li>
        <li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li>
        <!-- ... -->
    </ul>
</div>

4. Options;

// number of rows
rows            : 4,
 
// number of columns 
columns         : 10,
 
// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024           : {
    rows    : 3,
    columns : 8
},
 
w768            : {
    rows    : 3,
    columns : 7
},
 
w480            : {
    rows    : 3,
    columns : 5
},
 
w320            : {
    rows    : 2,
    columns : 4
},
 
w240            : {
    rows    : 2,
    columns : 3
},
 
// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number should not be > options.maxStep
step            : 'random',
maxStep         : 3,
 
// prevent user to click the items
preventClick    : true,
 
// animation type
// showHide || fadeInOut || slideLeft || 
// slideRight || slideTop || slideBottom || 
// rotateLeft || rotateRight || rotateTop || 
// rotateBottom || scale || rotate3d || 
// rotateLeftScale || rotateRightScale || 
// rotateTopScale || rotateBottomScale || random
animType        : 'random',
 
// animation speed
animSpeed       : 500,
 
// animation easings
animEasingOut   : 'linear',
animEasingIn    : 'linear',
 
// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval        : 3000,
// if false the animations will not start
// use false if onhover is true for example
slideshow       : true,
// if true the items will switch when hovered
onhover     : false,
// ids of elements that shouldn't change
nochange        : []

Change log:

• adding a callback function (2013-06-26)

---

This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.