Animated Responsive Image Grid

A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.

Animated Responsive Image Grid

From our sponsor: Try Mailchimp today.

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:

Thanks to Jesse Chase for sending us a similar idea and inspiring us.

Hope you find this useful!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 115

Comments are closed.
  1. Nice. Definitely inspires a use case for mobile. many articles usually talk about responsive design but one part that is always missing is responsive sliders.

    • Actually there are several responsive sliders out there, webdesignledger has listed some of them on their blog.

  2. As usual, awesome results. After reading most all of your tutorials, and playing with the bulk of your jQuery plug-ins, I’ve come to one inescapable conclusion that has bugged me for almost a decade: doing anything in javascript just amounts to a lot of code. You just can’t get around it. Even now, with libraries like motools and jQuery picking up the slack, standalone stuff still ends up being humongous.

    I remember back in about 2001-2002, I wrote a dropdown menu in js for an old snippet site called javascriptsource.net, or something similar, and it ended up being 700-800 lines of code. Just for a dropdown menu! Something that we can do today with a little CSS and/or maybe a dozen lines of js. I just wish it didn’t take 1000 lines of js to make a few pics in a grid flow, expand and shrink, and move around a bit.

    • jQuery, Modernizer, SASS and more try to do their best and while it can sometimes feel like it’s a lot of code; All these frameworks try to save you from writing what would be much more code to write without their existence.

      With drafts of new technologies being more debated between browser vendors than ever before, the future will get more and more simplified, but these frameworks help with the reality of now which is something we should all be appreciative of if we to attempt to do cross-browser work without such frameworks….

  3. Hi Mary
    I was wondering where did you get that loading.gif? Can I use it in my project?

  4. great tutorial.
    is it possible to make thumbs linkable to internal or external page?

  5. This is a nice piece of code.

    but my question is: is there a way to make the images clickable? like give each image a different link, to use it as a kind of ever changing menuwall

  6. @DW @felix007 Yes that’s possible, you need to specify each anchor’s href and then you just have to set the option “preventClick” to false when initializing the plugin. Hope it helps. Cheers, ML

  7. Hi Mary Lou,
    This is awesome! I was wondering if you have any restricts for using this? Can I use it for a client’s site? Can I create a template to sell using it & giving credit of course?

    Thanks!

  8. Fantastic plugin! However, I have a question…
    What about the aspect ratio of the images? I use a php code that extracts the thumbnail from Dribbble whose width is 400px and a height of 300px. But they render as 210 x 209 when this plugin converts them into background images. Is this a easy fix?

    Thank you in advance!

  9. Great Plugin, funnily enough I was running some tests with jQuery Transit the other day but couldn’t find an immediate use for it – but I guess here’s a good one 🙂

  10. The rows and columns settings seem to get ignored and some alternative settings get calculated. If you set the ROWS to 2, you still get 3 rows displayed. Is there a default value somewhere that is over-riding the options settings?

    • The rows and columns are only used if the container is larger than 1024px. If not, the values are the ones set in the options w1024, w768, w480, w320 and w240. If the container’s width is < 240 then the w240 values are used, if < 320 the w320 values are used and so on... Cheers, ML

  11. Hi, i want to use the hover effect on the images, this is possible? how? i cant do it! help please

  12. Hi, nice works – I replaced the internal links <a href="#" rel="nofollow"></a> to external ones <a href="#" rel="nofollow"></a> but it won’t work – the pcitures are displayed but not changed!? Any hint? Regards, Thomas

  13. Has anyone managed to attached a Fancybox or similar to this plugin? Where would you put the call to attach the Fancybox?

  14. This brilliant script doesn’t work if I move the index file to another folder.
    Checked paths hundred times… Smth. hardcoded in JS?
    What can be the problem (images loaded but not displayed, preloader is displayed)…

    • Hi! I had the same problem. You right, there are the loading image hardcoded in jquery.gridrotator.js file. You should find a path “img/loading.gif” in this file and change to fullpath of this image.

    • Thanks, Kirill! You’re right, but strangely enough I solved the problem by copying (replacing) the content from .bak file to JS… 🙂

  15. Great script, works fine, but any ideas why the first image in the grid wouldn’t ever be replaced? Thanks

    • I just checked the demo again, and I can confirm that the first image changed. The images that go “out” are randomly picked. It’s just a question of time until that one is selected 🙂 Cheers, ML

  16. Hi does this work on iphone, smart phone, etc I don’t own these wonderful toys – I am not sure if it flickers or works really well – would appreciate someone’s knowledge – by the way – very clever…

  17. Sweet! My first question was about linking out to a post/page/external link, but I saw your answer to that. Another question: Is it possible to pull in those thumbnails from a third party source (i.e. Flickr) as opposed to pulling from my own site? Thanks for the writeup!

  18. Hi, very nice plugin! It works under IE8? I try to use with this browser but the gallery seeems not work correctly…

  19. I really liked your work)
    But I have a problem: I can not make it so that when you click on the image, move to another page.

    Nothing worked.
    Help please!

    • Hi there. To link the images to another page, you need to open jquery.gridrotator.js and around line 122, change preventClick : true to preventClick : false,.

      For added style, you might want to change the the curser to ‘Pointer’

    • @Jamie There’s an easier way. Just call the plugin with the option “preventClick” set to false: $( ‘#ri-grid’ ).gridrotator( { preventClick : false }); Cheers, ML

  20. Thanks Mary!!!

    Very nice plugin.

    I unstaled plugin and it’s work perfectly. But I have one little problem – js of the plugin conflict with another js scripts, so now image grid plugin work properly and another jq sripts not. I will be glad, if you may help me with this problem.
    The problem appear as: conflict in custom.js in lines with flex slider and lightbox…
    You may see it in my site: http://webpg.ru/

    Regards,
    Alex

  21. hey awesome script, want to use in my works, is this plugin is under GPL license, can i use this for everything?

  22. Hi Mary Lou,

    thank you for this wonderful code..
    i’m tryng to use it in my website inside a slidepanel with your impressive icon menu but something is going wrong when I load the page with the pane set to closed..
    even the menu is messed up..

    opened panel onload
    closed panel onload

    can you help me please?

    I love tympanus.net

    sorry for my english

    PS: @krishna .. i’m not the developer but read the previous comments and license

    • Was thinking the same thing. Want a way to pull images from an instragram feed by user name or rss or flickr via tags.

  23. Thanks for this,

    Is there any way of making certain grids larger than others? Giving it a more fluid design than just standard-sized blocks. e.g. http://puu.sh/1820V

    I mean ideally it’d be awesome if the size of the blocks could interchange, but only say 50px by 50px images went into the 50×50 box, etc. A bit like http://www.cbsinteractive.com/

    I’d appreciate a reply.

  24. Can you tell me how do i had links to the images. I tryed to do it “a href=”index2.html”” but it doesn´t work…

    Thank you in advance

  25. Dear, I test your fantastic plugin for a website but I have the problem that the first upper left image don’t change ever.

    • It’s just a matter of time until it changes 🙂 I just tested it now and it seems fine. Cheers, ML

    • Same issue here with an odd number of pictures (3 for my use case).
      I had to change the code in the Array.prototype.shuffle function by using :
      p = Math.floor(Math.random()*(i+1));

      Before this change my 1st picture was never selected.

  26. hi, its really awesome script, i was trying to incorporate this script in my upcoming project, in that page i have a countdown timer, when i am including this the timer and grid images also not working, let me know how can i solve this, pls help me if i need to change anything in script.
    thanks in advance

  27. Hi great tut.
    but when i see this in IE (index2) the images are not as other browsers, all the images are became centered with 6 images. how can we fix this?
    Thanks in advance.
    krishna

  28. What a wonderful script ! I have a question, I am using the grid to show brands. But there are different subjects. Is it possible to render the images in 3 different grids which all fit in the white shadow rectangle ? So i’ll have one 2X3 with cigar brands, one 3X3 with soda and one 2×3 with food. So it looks like one grid but the images render by purpose? Thanks in advance !

    • I found how to do rectangle images (but – with only one ratio)

      At line 199:
      height : itemWidth
      change to:
      height : Math.floor(itemWidth * 0.56)

      where ‘0.56’ is image width/height ratio

  29. The jquery doesn´t work any more with Firefox version 16…i get this error:

    TypeError: h.setFromString is not a function

    jquery.transit.min.js (Line 10)

    is there any update for this Query in Line ??? IE and Chrome work´s still fine.

  30. Hello!!! Thank you for such wonderful solutions guys!
    but please fix it.

    Firefox 16 !!! a small problem… no animation DEMO1

    TypeError: h.setFromString is not a function
    jquery.transit.min.js (Line 10)

  31. I am having the same “first image never changing” issue as a couple of other people have posted. seems that the first image does not change if “step” is set to 1. has anyone been able to solve this issue?

  32. I will soon update the script and fix the issues mentioned in the comments! Thank you all for your feedback. Cheers, ML

  33. This is working well for me. One question though. Is there a mechanism for locking down one line item in the grid so that it doesn’t rotate and stays constant? Thanks!