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 monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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:

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

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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