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

View demo Download source

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!

View demo Download source

Previous:
Next:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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

Which newsletter would you like to receive?

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

    Hello, It s there a way how I can make this work with 20 columns by 50 rows ? Thanks

  2. 4

    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.

  3. 5

    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

  4. 6

    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?

    • 7

      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!

Comments are closed.