一个灯箱效果的图片展示插件。

  • 版本:
  • jQuery v1.2.3+
  • jQuery Lightbox v2.7.1

  • github

实例预览

使用方法

载入 CSS 文件

  1. <link rel="stylesheet" href="lightbox.css">
复制

载入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="lightbox.js"></script> 
复制

DOM 结构

  1. <a href="image-1.jpg" data-lightbox="image-1" data-title="文字说明">Image #1</a> 
  2.  
  3. <!-- 如果是一组相关的图片,可以对该组图片设置 data-lightbox 属性为相同的值。--> 
  4. <a href="img/image-2.jpg" data-lightbox="group">Image #2</a> 
  5. <a href="img/image-3.jpg" data-lightbox="group">Image #3</a> 
  6. <a href="img/image-4.jpg" data-lightbox="group">Image #4</a> 
复制

以上内容设置好即可,会自动调用 Lightbox。

使用说明

支持标签
名称 描述
<a> 链接
<area> 图像映射区域
属性选项
名称 说明
rel 值以 "lightbox" 为开头时,表示需要使用 Lightbox 展示
data-lightbox 设置任意值时,表示需要使用 Lightbox 展示
title Lightbox 展示时,显示的标题或说明文字
data-title
href Lightbox 展示时,显示的图片

参数说明

注意:目前除了修改源码,不能在调用的时候修改参数(因为是自动调用的,并且参数没有暴露到外部),期待以后的更新能完善该功能。

名称 默认值 说明
fadeDuration 500 透明效果过渡时间 (ms)
fitImagesInViewport true 根据窗口大小自动调整图片尺寸
resizeDuration 700 尺寸变化效果过渡时间
positionFromTop 50 与顶部的距离 (px)
showImageNumberLabel true 显示页码标签
alwaysShowNavOnTouchDevices false 在触摸设备上始终显示上下页按钮
wrapAround false 持续显示上下页按钮

最新文章

  1. 【那些年关于java多态应用】
  2. 12月8日phpcms添加子栏目后的读取
  3. sql 函数 汉字转拼音
  4. 安卓APP关于切图标
  5. 通过pinyin4j.jar将(汉字拼音混合字符串)转化成字母首字母
  6. Java小程序--抓取emai
  7. 使用Innosetup制作安装包的一些技巧
  8. 干净的卸载Oracle
  9. httpClient多线程请求
  10. 搭建XMPP协议,实现自主推送消息到手机
  11. Android界面的View以及ViewGroup的区别
  12. you need to be root to perform this command linux
  13. HTML5 Canvas Arc Tutorial
  14. c#中控制不能从一个case标签贯穿到另一个case标签
  15. qt中的事件机制
  16. 用phpcms切换中英文网页的方法(不用解析二级域名)、phpcms完成pc和手机端切换(同一域名)
  17. edge
  18. windows openssh 设置root 目录
  19. shiro课程的学习
  20. 终于知道什么情况下需要实现.NET Core中的IOptions接口

热门文章

  1. PAT第二次上机题目
  2. Oracle 12c Windows安装、介绍及简单使用(图文)
  3. 01_DllZZ.cpp
  4. [原][译][lua][luabridge]一个简单的luabridge与c++例子结合例子
  5. android 开发 出错
  6. Python -- Json 数据编码及解析
  7. 快速搭建一个简易的KMS 服务
  8. Ant Man CodeForces - 704B (图论,贪心)
  9. hdu-2147-博弈
  10. UVA-10163 Storage Keepers (0-1背包)