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: Take WordPress to a whole new level with Divi's incredibly advanced visual builder technology. Try it for free.

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. 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.

  2. 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)

  3. 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?

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

  5. 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!

  6. 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!

  7. 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.

    • It works in IE9.. For older versions there’s just a simple fallback. Which version are you using? Cheers, ML

  8. 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

  9. Is there a way to pull images from an instagram feed by user name or rss or flickr via tags.

  10. 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;
      }

  11. 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?

  12. 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