jquery.gridrotator implementiert eine responsive Bildanzeigegalerie effect_jquery

jquery.gridrotator ist ein sehr praktisches responsives Galerie-Plug-in für die Bildanzeige. Dieses Plug-in für die Bildanzeigegalerie ordnet Bilder wie ein Raster an und dreht die Bilder dann zufällig in einem Raster um, um ein anderes Bild anzuzeigen. Insgesamt gibt es 6 Effekte.

HTML-Struktur:

HTML-Struktur ist sehr einfach.

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

Anruf-Plug-in

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

Vergessen Sie nicht, die Dateien jQuery und jquery.gridrotator.js einzuführen.
Optionale Parameter

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

Wenn Sie die Rastergröße festlegen, sollten Sie beachten, dass nicht alle Bilder auf einmal im Raster angezeigt werden. Wenn Sie beispielsweise 50 Bilder haben und 4 Zeilen und 5 Spalten definieren, werden 20 Bilder im Raster angezeigt und die anderen 30 Bilder werden zum Spiegeln und Wechseln von Bildern verwendet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.