来自 系统操作 2019-09-04 19:46 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

gridrotator实现响应式图片展示画廊效果,javascri

这是一款不依赖任何js框架、纯javascript实现的画廊效果。它支持移动设备手势操作,如手势触摸滑动、放大和关闭图片,它还支持PC上的键盘操作,总之它是WEB开发者不可或缺的图片画廊插件,它叫photoswipe。

 jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。

展示效果图如下:

HTML结构:

图片 1

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>

HTML

调用插件

首先加载所需的CSS和js文件。

$(function() {     
  $( '#ri-grid' ).gridrotator();
});
<link rel="stylesheet" href="css/photoswipe.css"> 
<link rel="stylesheet" href="css/default-skin/default-skin.css"> 
<script src="js/photoswipe.min.js"></script> 
<script src="js/photoswipe-ui-default.min.js"></script> 

注意别忘了引入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    : []

接下来,准备body里的HTML部分。我们在页面里准备图片缩略图,当点击这张缩略图时,会弹出对应的大图集,我们准备

当你定义网格大小的时候,你要注意的是不是所有的图片都会在网格中立刻显示。举个例子,你有50张图片,定义了4行5列,那么会有20张图片在网格中显示,其它30张用来做图片翻转切换。

HTML结构如下:

以上所述就是本文的全部内容了,希望大家能够喜欢。

<div id="photos"> 
 <img src="images/s1_m.jpg" alt="Image description" /> 
 <p>图集</p> 
</div> 

您可能感兴趣的文章:

  • Android App开发中使用RecyclerView实现Gallery画廊的实例
  • jquery实现带缩略图的可定制高度画廊效果(5种)
  • javascript实现支持移动设备画廊
  • jquery实现带缩略图的全屏图片画廊效果实例
  • 10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
  • 五个jQuery图片画廊插件 推荐
  • CSS3+Js实现响应式导航条
  • 原生javascript+css3编写的3D魔方动画旋扭特效
  • JS 控制CSS样式表
  • JS+CSS3实现超炫的散列画廊特效

现在,重要的画廊展示部分将为大图展示提供架构,注意以下代码中的元素:.pswp__bg, .pswp__scroll-wrap, .pswp__container 和 .pswp__item这几个Div不可更改。

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 
 <div class="pswp__bg"></div> 
 <div class="pswp__scroll-wrap"> 
  <div class="pswp__container"> 
   <div class="pswp__item"></div> 
   <div class="pswp__item"></div> 
   <div class="pswp__item"></div> 
  </div> 
  <div class="pswp__ui pswp__ui--hidden"> 
   <div class="pswp__top-bar"> 
    <div class="pswp__counter"></div> 
    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 
    <button class="pswp__button pswp__button--share" title="Share"></button> 
    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 
    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 
    <div class="pswp__preloader"> 
     <div class="pswp__preloader__icn"> 
      <div class="pswp__preloader__cut"> 
      <div class="pswp__preloader__donut"></div> 
      </div> 
     </div> 
    </div> 
   </div> 
   <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 
    <div class="pswp__share-tooltip"></div> 
   </div> 
   <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> 
   </button> 
   <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> 
   </button> 
   <div class="pswp__caption"> 
    <div class="pswp__caption__center"></div> 
   </div> 
   </div> 
  </div> 
</div> 

以上HTML结构定义了画廊展示的内容、工具、方向按钮、标题说明等元素。

Javascript

我们在js里定义图集图片集合(当然也可以像demo2一样在html部分定义图片集),设置各种选项,然后通过使用new PhotoSwipe()来调用photoSwipe插件。

var openPhotoSwipe = function() { 
 var pswpElement = document.querySelectorAll('.pswp')[0]; 
 //定义图片集合 
 var items = [ 
  { 
   src: 'images/s1.jpg', 
   w: 800, 
   h: 1142 
  }, 
  { 
   src: 'images/s2.jpg', 
   w: 800, 
   h: 1142 
  } 
 ]; 
 var options = { 
  history: false, 
  focus: false, 
  showAnimationDuration: 0, 
  hideAnimationDuration: 0 
 }; 
 var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); 
 gallery.init(); 
}; 


//点击图集元素时触发调用openPhotoSwipe 

document.getElementById('photos').onclick = openPhotoSwipe; 

大家可以将该款插件应用到移动项目中去,更多选项设置请参考PhotoSwipe项目地址:<。

以上内容就是javascript实现支持移动设备画廊的全部内容,希望大家喜欢。

您可能感兴趣的文章:

  • Android App开发中使用RecyclerView实现Gallery画廊的实例
  • jquery实现带缩略图的可定制高度画廊效果(5种)
  • jquery实现带缩略图的全屏图片画廊效果实例
  • jquery.gridrotator实现响应式图片展示画廊效果
  • 10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
  • 五个jQuery图片画廊插件 推荐
  • CSS3+Js实现响应式导航条
  • 原生javascript+css3编写的3D魔方动画旋扭特效
  • JS 控制CSS样式表
  • JS+CSS3实现超炫的散列画廊特效

本文由六合联盟网发布于系统操作,转载请注明出处:gridrotator实现响应式图片展示画廊效果,javascri

关键词: