Home > Web Front-end > JS Tutorial > body text

jquery.gridrotator implements responsive image display gallery effect_jquery

WBOY
Release: 2016-05-16 15:53:36
Original
1239 people have browsed it

jquery.gridrotator is a very practical responsive image display gallery plug-in. This picture display gallery plug-in arranges pictures like a grid, and then randomly flips the pictures in a grid to display another picture. There are 6 effects in total.

HTML structure:

HTML structure is very 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>
Copy after login

Call plug-in

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

Don’t forget to introduce jQuery and jquery.gridrotator.js files.
Optional parameters

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

When you define the grid size, you should note that not all images will be displayed in the grid at once. For example, if you have 50 pictures and define 4 rows and 5 columns, then 20 pictures will be displayed in the grid, and the other 30 pictures will be used for picture flipping and switching.

The above is the entire content of this article, I hope you all like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template