Animated Responsive Image Grid

The code of Codrops (credits to Mary Lou) dates from 2012 but is still attractive. I reworked it and integrated it into a Drupal module 8.

The original code contains five demos... I've picked the best. The principle is as follows ... You choose a fixed number of rows and columns. This will give you a fixed number of images. If you have more images than the fixed number, the others appear by replacing the previous ones. This is in an infinite loop. So all images are visible. The replacement is done with random animations. There are a dozen different ones.

A print of an animation (see dog).

A print of two animations simultaneously.

I made it as user friendly as possible. You give the grid a name and choose the content type and image field you want to use. You can also change the width (in %), the number of columns and rows must be set (for a screen larger than 1240px. For smaller screens, I used the default settings.). Finally, you can choose whether you want to use images to link to the node or not. 


If your screens is smaller than 1240 px the number of columns and rows, can still be set directly in the code. 

 

Clicking takes you to the  node (if set so)

These are the animations ... impressive ... In the code of this js file you can also determine how quickly you want the animation and how many images at the same time you want to change .. In the code there are more settings possible than through the interface that I created. You don't need them as the default settings are quite nice...


 

Installation