Animated Responsive Image Grid

De code van Codrops (credits to Mary Lou) dateert van 2012 maar blijft aantrekkelijk. Ik dit herwerkt en geïntegreerd in een Drupal 8 module.

De originele code bevat  5 demo's waar ik het beste heb uitgepikt. Het principe is als volgt...Je kiest een vast aantal rijen en kolommen. Dit geeft je vast een aantal afbeeldingen. Als je meer afbeeldingen hebt dan dit vast aantal, verschijnen de anderen door de vorige te vervangen. Dit in een oneindige lus. Zo komen alle afbeeldingen zichtbaar. Het vervangen gebeurt met willekeurige animaties. Er zijn er een tiental verschillende. 

Een print van een een animatie (zie hondje).

Een print van 2 animaties tegelijkertijd.

Ik heb het zo gebruiksvriendelijk mogelijk gemaakt. Je geeft het rooster een naam en kiest het inhoudstype en afbeeldingsveld dat je wilt gebruiken. Je kunt ook de breedte (in%), het aantal kolommen en rijen instellen (voor een scherm groter dan 1240px. Voor schermen die smaller zijn, heb ik de standaardinstellingen gebruikt.). Tenslotte kan je ook kiezen of je de afbeeldingen als link wilt gebruiken naar de node of niet. 


Als je voor schermen minder dan 1240 px het aantal kolommen en rijen wilt wijzigen, kan je dit in de code doen. Ik heb er echter geen interface voor gemaakt.

 

Bij klikken kom je op de node terecht (als je dit zo instelt).

Dit zijn de animaties die de script gebruikt.. indrukwekkend... In de code van dit js bestand kan je trouwens nog bepalen met welke snelheid je de animaties wilt en hoeveel afbeeldingen tegelijkertijd je wilt vervangen.. Er zijn dus via de code nog meer instellingen mogelijk dan via de interface die ik gemaakt heb.

Installatie