Lightbox/弹窗

jQuery炫酷图片预览Lightbox插件

阿里云

这是一款使用 jQuery 制作的画廊图片预览 lightbox 插件。该 Lightbox 插件小巧、简单、易用,效果也非常炫酷。它在图片放大和属性时有很酷的淡入淡出动画效果。

安装插件:

要使用这个 lightbox 插件,首先需要引入必要的文件:jQuery 和 jquery.lighter.js 以及 jquery.lighter.css 文件。

也想出现在这里?联系我们
创客主机
  1. <script src="https://gapis.geekzu.org/ajax/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
  2. <script src="javascripts/jquery.lighter.js" type="text/javascript"></script>
  3. <link href="stylesheets/jquery.lighter.css" rel="stylesheet" type="text/css" />

使用方法:

该 lightbox 插件的使用方法非常简单,在引入必要的文件之后,只需要按以下结构变形 html 代码即可,该图片预览插件会在 DOM 加载完毕后自动运行。

  1. <a href="samples/sample-01.png" data-lighter>
  2.   <img src="samples/preview-01.png" />
  3. </a>
  4. <a href="samples/sample-02.png" data-lighter>
  5.   <img src="samples/preview-02.png" />
  6. </a>
  7. <a href="samples/sample-03.png" data-lighter>
  8.   <img src="samples/preview-03.png" />
  9. </a>
  10. <a href="samples/sample-04.png" data-lighter>
  11.   <img src="samples/preview-04.png" />
  12. </a>
  13. <a href="samples/sample-05.png" data-lighter>
  14.   <img src="samples/preview-05.png" />
  15. </a>
  16. <a href="samples/sample-06.png" data-lighter>
  17.   <img src="samples/preview-06.png" />
  18. </a>

jQuery 炫酷图片预览 Lightbox 插件

已有 406 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

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