jquery.gridrotator는 반응형 이미지 표시 갤러리를 구현합니다. effect_jquery

jquery.gridrotator는 매우 실용적인 반응형 이미지 표시 갤러리 플러그인입니다. 이 사진 표시 갤러리 플러그인은 사진을 격자처럼 배열한 다음 격자의 사진을 무작위로 뒤집어 다른 사진을 표시합니다. 총 6가지 효과가 있습니다.

HTML 구조:

HTML 구조는 매우 간단합니다.

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

호출 플러그인

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

jQuery와 jquery.gridrotator.js 파일을 소개하는 것을 잊지 마세요.
선택적 매개변수

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

격자 크기를 정의할 때 모든 이미지가 한 번에 격자에 표시되지는 않는다는 점에 유의해야 합니다. 예를 들어, 50개의 그림이 있고 4개의 행과 5개의 열을 정의하면 20개의 그림이 그리드에 표시되고 나머지 30개의 그림은 그림 뒤집기 및 전환에 사용됩니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.