jquery.gridrotator melaksanakan galeri paparan imej responsif effect_jquery

jquery.gridrotator ialah pemalam galeri paparan imej responsif yang sangat praktikal. Pemalam galeri paparan gambar ini menyusun gambar seperti grid, dan kemudian secara rawak menyelak gambar dalam grid untuk memaparkan gambar lain. Terdapat 6 kesan kesemuanya.

Struktur HTML:

Struktur HTML sangat mudah.

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

Panggil pemalam

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

Jangan lupa untuk memperkenalkan fail jQuery dan jquery.gridrotator.js.
Parameter pilihan

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

Apabila anda menentukan saiz grid, anda harus ambil perhatian bahawa tidak semua imej akan dipaparkan dalam grid sekaligus. Sebagai contoh, jika anda mempunyai 50 gambar dan mentakrifkan 4 baris dan 5 lajur, maka 20 gambar akan dipaparkan dalam grid, dan 30 gambar yang lain akan digunakan untuk menyelak dan menukar gambar.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.