Today we want to share a jQuery plugin for creating a responsive image grid with you. The idea is to have a list of images and define the number of columns and rows which will arrange the images into a grid. The remaining images will appear with different animations and delays. With some sizing options we can define how the grid should be laid out for different screen widths.
This kind of component can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.
The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0).
The HTML structure is simply an unordered list with anchors and images:
<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>
To call the plugin, simply do:
$(function() {
$( '#ri-grid' ).gridrotator();
});
Don’t forget to include the other scripts that are needed.
Options
The following options are available:
// 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 : []
When defining the size of the grid, you should keep in mind that you will want to have less images in the grid than what you actually put in the list. Let's say you have a list of 50 images and define 5 columns and 4 rows. This will create a grid of 20 images with 30 left to be switched.
Check out the five demos with different configurations:
- Demo 1: Random animations / 55% container width / 3s between switching
- Demo 2: "fadeInOut" animation / 100% container width / 1 image switch at a time / 600ms between switching
- Demo 3: Random animations / 100% container width / max. 2 images switch at a time / 2s between switching
- Demo 4: Random animations / 55% container width / 3s between switching / elements 1,2,3 and 4 don't switch / clickable elements
- Demo 5: rotateBottom animation / 55% container width / no slideshow / onhover true
Thanks to Jesse Chase for sending us a similar idea and inspiring us.
Hope you find this useful!
Photo Booth Strips with Lightbox
Hola, que necesito hacer para que funcionen las url de cada imagen
Use:
preventClick : false
Thank you so much. You are awesome!!!!
Hi ML – great script – think it will perfectly
one question – is there a way to add white space between images?
tried to change margins of li items but breaks grid structure
thanks so much!
Hello! I loved you plugin very much! i want to use it for my web-sit? if you don’t mind) I started to edit it (change pix and text) and i realized that it doesn’t work offline – pix don’t appear . Could you please help me with this? probably i need this file http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Hi. This is a awsome responsive technique. I am doing a portfolio and i need the images that apear within each “li” to relate to a specific job. In this case it randoms. Can you tell me how i do this?
Thank you in advance
Hello,
I have found an issue with your gridrotator: I have a list of images and they all rotate nicely but if I set the step to 1 then the first image of the list never changes. If I set Step to 2, the issue is gone. Any ideas?
I fixed the bug like that: line 20 of gridrotator now looks like this
// Stefano Vergani – the following line fixes the bug that if step=1 the first image never changes
p = Math.floor(Math.random()*this.length);
Hi, ML I love your code and I want to get to play with it, but I’m pretty new in this so this is a stupid question.
I m changing the pictures in the img folder same width and height as the ones in the demo and the grid it gone.
Do I have to change something else?
Having trouble with the images getting requested from the server over and over. I’m not seeing that behavior on the server.
Any help would be greatly appreciated.
Having trouble to add a lightbox pluggin in rotator pluggin . i want when we click on image it comes in a lightbox but it’s not working it is possible or not? let me know and by the way it was awesome pluggin very good effect i just loved it thanks for sharing