手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

jQuery侧边栏式lightbox图片画廊插件jQ 0 1 admin

时间:2020-06-24    点击: 次    来源:网络    作者:佚名 - 小 + 大

简要教程

这是一款jQuery侧边栏式lightbox图片画廊插件。该插件使用非常简单,可以对图片进行分组,然后以侧边栏滑出的方式,在侧边栏轮播展示这组图片。

使用方法

在HTML文件中引入。

  <link href="src/strip.css" rel="stylesheet"><script src="//code.jquery.com/jquery.min.js"></script><script src="src/strip.min.js"></script>                   
HTML结构
<a href="images/large/1.jpg" data-strip-caption="Image caption here" data-strip-group="gallery-name">  <img src="images/thumb/1.jpg"> </a><a href="images/large/2.jpg" data-strip-caption="Image caption here" data-strip-group="gallery-name">  <img src="images/thumb/2.jpg"> </a><a href="images/large/3.jpg" data-strip-caption="Image caption here" data-strip-group="gallery-name">  <img src="images/thumb/3.jpg"> </a>                

配置参数

effects: { // Sets the duration of individual effects, or disables them when set to false.  spinner: {    show: 200,    hide: 200  },  transition: {    min: 175,    max: 250  },  ui: {    show: 0,    hide: 200  },  window: {    show: 300,    hide: 300  }},maxWidth: 500, // Sets a maximum width for the content.maxHeight: 500, // Sets a maximum height for the content.hideOnClickOutside: !0, // hideOnClickOutsideHide Strip when clicking outside of it or an element that could open it, enabled by default.keyboard: { // keyboardEnable or disable individual keyboard buttons or all of them when set to false.  left: !0,  right: !0,  esc: !0},loop: !0, // When set to true a group becomes a loop, making it possible to move between the first and last itemoverlap: !0, // overlapAllows buttons to overlap the content when set to true, which is the default. Disabling overlap will cause buttons to be positioned outside of the content.preload: [1, 2], // Sets the items to preload before and after the current item, or disables preloading when set to false.position: !0, // Show or hide the position indicator.side: "right", // sideSet the side to position Strip on to top, bottom, left or right.vimeo: { // vimeoSets the player parameters of a Vimeo video, available options can be found in the Vimeo   autoplay: 1,  api: 1,  title: 1,  byline: 1,  portrait: 0,  loop: 0},youtube: { // Sets the player parameters of a Youtube video, available options can be found in the Youtube   autoplay: 1,  controls: 1,  enablejsapi: 1,  hd: 1,  iv_load_policy: 3,  loop: 0,  modestbranding: 1,  rel: 0,  vq: "hd1080"},skin: 'strip', // Sets the skin. If you've provided default options for this skin they'll be applied as a starting point for other options.afterPosition: // A function to call after the position changed. The first argument is the current position within the group.afterHide: // A function to call after Strip is fully hidden.onShow: // A function to call when Strip comes into view.                

 该jQuery侧边栏式lightbox图片画廊插件的github网址为:https://github.com/staaky/strip

本地下载

上一篇:基于Bootstrap的可拖拽式网格系统插件jQ 0 1 admin

下一篇:基于vuejs的鼠标悬停动物显示和隐藏动画特效jQ 0 1 admin

浙ICP备18035339号-15  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  13388629007  |  
Copyright © 2023 蚂蚁分享网 版权所有,授权www.tanan.net使用 Powered by ANTQQ.COM