图片/图形

lightbox 侧边栏式图片画廊jQuery插件

也想出现在这里?联系我们
面包多

lightbox 侧边栏式图片画廊jQuery插件-创客云
使用方法
在 HTML 文件中引入

  1. <link href="src/strip.css" rel="stylesheet">
  2. <script src="//code.jquery.com/jquery.min.js"></script>
  3. <script src="src/strip.min.js"></script>
也想出现在这里?联系我们
创客主机

HTML 结构

也想出现在这里?联系我们
创客主机

  1. <a href="images/large/1.jpg" data-strip-caption="Image caption here" data-strip-group="gallery-name">
  2.   <img src="images/thumb/1.jpg"> 
  3. </a>
  4.  
  5. <a href="images/large/2.jpg" data-strip-caption="Image caption here" data-strip-group="gallery-name">
  6.   <img src="images/thumb/2.jpg"> 
  7. </a>
  8.  
  9. <a href="images/large/3.jpg" data-strip-caption="Image caption here" data-strip-group="gallery-name">
  10.   <img src="images/thumb/3.jpg"> 
  11. </a>

配置参数

  1. effects: { // Sets the duration of individual effects, or disables them when set to false.
  2.   spinner: {
  3.     show: 200,
  4.     hide: 200
  5.   },
  6.   transition: {
  7.     min: 175,
  8.     max: 250
  9.   },
  10.   ui: {
  11.     show: 0,
  12.     hide: 200
  13.   },
  14.   window: {
  15.     show: 300,
  16.     hide: 300
  17.   }
  18. },
  19. maxWidth: 500, // Sets a maximum width for the content.
  20. maxHeight: 500, // Sets a maximum height for the content.
  21. hideOnClickOutside: !0, // hideOnClickOutsideHide Strip when clicking outside of it or an element that could open it, enabled by default.
  22. keyboard: { // keyboardEnable or disable individual keyboard buttons or all of them when set to false.
  23.   left: !0,
  24.   right: !0,
  25.   esc: !0
  26. },
  27. loop: !0, // When set to true a group becomes a loop, making it possible to move between the first and last item
  28. overlap: !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.
  29. preload: [1, 2], // Sets the items to preload before and after the current item, or disables preloading when set to false.
  30. position: !0, // Show or hide the position indicator.
  31. side: "right", // sideSet the side to position Strip on to top, bottom, left or right.
  32. vimeo: { // vimeoSets the player parameters of a Vimeo video, available options can be found in the Vimeo 
  33.   autoplay: 1,
  34.   api: 1,
  35.   title: 1,
  36.   byline: 1,
  37.   portrait: 0,
  38.   loop: 0
  39. },
  40. youtube: { // Sets the player parameters of a Youtube video, available options can be found in the Youtube 
  41.   autoplay: 1,
  42.   controls: 1,
  43.   enablejsapi: 1,
  44.   hd: 1,
  45.   iv_load_policy: 3,
  46.   loop: 0,
  47.   modestbranding: 1,
  48.   rel: 0,
  49.   vq: "hd1080"
  50. },
  51. 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.
  52. afterPosition: // A function to call after the position changed. The first argument is the current position within the group.
  53. afterHide: // A function to call after Strip is fully hidden.
  54. onShow: // A function to call when Strip comes into view.

Github 网址:https://github.com/staaky/strip

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!