jquery.gridrotator implémente une galerie d'affichage d'images réactive effect_jquery

jquery.gridrotator est un plug-in de galerie d'affichage d'images responsive très pratique. Ce plug-in de galerie d'affichage d'images organise les images comme une grille, puis retourne les images de manière aléatoire dans une grille pour afficher une autre image. Il y a 6 effets au total.

Structure HTML :

La structure HTML est très simple.

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

Plug-in d'appel

$(function() {     
  $( '#ri-grid' ).gridrotator();
});

N'oubliez pas d'introduire les fichiers jQuery et jquery.gridrotator.js.
Paramètres facultatifs

// 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    : []

Lorsque vous définissez la taille de la grille, vous devez noter que toutes les images ne seront pas affichées en même temps dans la grille. Par exemple, si vous avez 50 images et définissez 4 lignes et 5 colonnes, alors 20 images seront affichées dans la grille et les 30 autres images seront utilisées pour le retournement et la commutation d'images.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.