From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
Sorry for my ridiculous message !
Super script! Works fine in FF and Safari – but totally doesn’t work under IE8. How to manage to work this under IE? Any help, please!
Hi! Love this script.
Just one thing. Adding the rows or columns option to Demo 1 (width 55%) doesn’t work. I’ve tried a lot of options but nothing seems to work.
Could you confirm: http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/comment-page-1/#comment-428004
In IE dont’ work!
Have someone fix the problem?
It works in IE9.. For older versions there’s just a simple fallback. Which version are you using? Cheers, ML
Hello, thank you for tanking the time to answer questions and for post this great plug in…
I have an issue, i am using a mac with a resolution of 2560 x 1440 and horizontally everything works perfect, but the heigh is the problem, i have just 4 rows and a big blank space at the end of the images…on the other hand in resolutions more populars as 1366 x 768 i have another problem only 7 columns and the space for the last column a blank space the 4 images of the 8th column appear at the end…wich i have an incomplete 5th row…
i dont understand my poor english let me know maybe i can attach a pic or something
thank you very much in advance and i hope you can help me, have a nice day
Is there a way to pull images from an instagram feed by user name or rss or flickr via tags.
I am trying to add a text box on top like this: http://www.globalendowment.com . Could this be done with this script? Or any other ideas/resources.
THANKS in advance!
Hi, thanks for this awesome plugin but the rows and columns settings seem to get ignored no matter what i do.
I added the option w2560 : { rows: 5, columns: 8 } since in resolutions of 2560 and smaller i just get 4 rows 8 columns and a blank space in the 5th row wich i want to fix.
I really would like a little help here
Thanks in advance
Maybe it’s because you have to add to your css
body {
overflow: scroll;
overflow-x: hidden;
}
I also attempted to add my own screen width options, but I’m seeing that they are ignored. I wanted to better control image scaling on screen widths between 1024 and the max (which can be quite a leap when on 2560 monitors). Otherwise, the grid images scale so much that it can greatly affect layout. Can you add support for additional “manual” screen width options?
Hi, Don’t know much about Jquery, but I was thinking is there a way to do a callback?
like
$( '#ri-grid' ).gridrotator( {'param'}, function() { /* callback code*/ }) ;thanks
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
I’m trying to achieve the same thing as the previous poster, but with fancybox.
In firefox it just opens the link, in IE9 it opens an empty fancybox
I’m unable to get this to work with JQuery 1.9+
Below is the error I receive:
Uncaught TypeError: Cannot read property ‘backgroundsize’ of undefined application.js:17205
$.GridRotator application.js:17205
(anonymous function) application.js:17845
jQuery.extend.each application.js:649
jQuery.fn.jQuery.each application.js:271
$.fn.gridrotator application.js:17836
(anonymous function) localhost/:332
fire application.js:1038
self.fireWith application.js:1149
jQuery.extend.ready application.js:434
completed
Any help would be appreciated.
I’m getting the same error…. “Uncaught TypeError: Cannot read property ‘backgroundsize’ of undefined”
Is there a fix for this? I’m using jQuery 1.8.3
Hi,
I’m trying to use your script, and wondering that is it possible to have an uneven height and width for the images. Currently, I think everything is perfectly square. How do I change it to accomodate, say, a 292px x 250px thumbs. Your help is greatly appreciated. Thanks.
Hi Mari Lou, Thanks for your fantastic work “as always” … also thanks to Stefano Vergani for your input … : )
He visto que es importante poner en el supuesto caso en que se utilice la versión de ancho completo
body {
overflow: scroll;
overflow-x: hidden;
}
Para que en resoluciones mayores de 1280px se vea correctamente el grid y no pasen algunos items a una fila inferior dejando un margen derecho bastante feo.
Excepto esto, muchísimas gracias por tan excepcional plugin ;)
Hello, I do not know why, but the last line image does not appear? Why?
Thank you for your help.
Hi,
Very useful … However, I’m trying to apply it with dynamic content where I have 25 images and I defined the rows 3 and columns 5 that would out put 15 and leave 10 to switch with…. But my only problem is that the output is giving one image yes and one image no … any Idea why this behavior is happening ???
Thank you
I’m getting an error…. “Uncaught TypeError: Cannot read property ‘backgroundsize’ of undefined”
Is there a fix for this? I’m using jQuery 1.8.3
I had the similar problem, enqueing modernizer before the gridrotator script fixed it.
Just a heads up that the mouse over hover animation stops working if you resize the window. Looking into why 🙂
There is any way to use no-squared images without stretch them!??
Very thanks for this great work!
I spent a while trying to get an on hover script working to show the full version of the image and finally got it working.
What I found out is that because there is a delay to load the images on to the page it is necessary to use on the script you are adding.
$(window).load(function(){ /*code here*/ })
I hope this others save time.
Hello, It s there a way how I can make this work with 20 columns by 50 rows ? Thanks
Hi Mary Lou,
Can we add Popup effect to this script.can you help me out on this
Is there a Version compatible with newer jquery versions?
Is there a way we can make this fully responsive (100% width & height) for long pages?
The grid should take whole height & width all the time.
it`s been a while but..
i try to have a startup-grid with special pics and i don`t wannt them to come back after they were once changed..
think of a grid of 10 pics and in real there are 20. i wannt the first 10 not to come back.
must be something with _showNext. when i do alert($out.toSource()); i see:
length:20 and prevObject:{0:{}, 1:{}, 2:{}, 3:{}, 4:{}, 5:{}, 6:{}, 7:{}, 8:{}, 9:{}, …
is there any way that the img 2 change index starts at 10+ ???
thanks for your time
Thank you for the code Mary, but I get an error “Uncaught TypeError: Cannot read property ‘length’ of undefined” on line 60 of the gridrotator file. Did anyone else face this issue?
Change row 60 of file jquery.gridrotator.js
from
p = Math.floor(Math.random()*this.length);
to
p = Math.floor(Math.random()*i);
it works good for me!
Hi…
I’m using this plugin with a new project and it still works really well… Thanks! I have only one issue/question: I’m using this demo version: https://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html and the very first image never changes even though it is not specified as a nochange[] element. Is there any way to remedy this behavior?