一款经典的 jQuery Lightbox 灯箱效果
使用方法
载入 CSS 文件
- <link rel="stylesheet" href="lightbox.css">
载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="lightbox.js"></script>
DOM 结构
<a href="image-1.jpg" data-lightbox="image-1" data-title="文字说明">Image #1</a>
<!-- 如果是一组相关的图片,可以对该组图片设置 data-lightbox 属性为相同的值。-->
<a href="img/image-2.jpg" data-lightbox="group">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="group">Image #3</a>
<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 | 持续显示上下页按钮 |
一款经典的 jQuery Lightbox 灯箱效果的更多相关文章
- 20款美化网站的 jQuery Lightbox 灯箱插件
jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...
- FancyBox - 经典的 jQuery Lightbox 插件
FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...
- lightBox灯箱效果
最近想做一个类似QQ空间相册,点击照片会出现一个遮罩层,然后显示照片,可以左右切换照片,上网查了,原来叫灯箱效果,于是自己也写了一个简单的灯箱效果,并进行了简单封装,封装得不是很完善,后面还需要改进, ...
- 一款经典的jQuery slidizle 幻灯片
jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...
- 一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
- 拍案惊奇!9款神奇的jQuery/CSS3经典插件
款非常给力的jQuery/CSS3经典插件,插件包括CSS3图片特效.jQuery动画菜单.jQuery时尚登录表单等,一起来看看这些jQuery插件. .CSS3图片重力感应特效 这是一款应用重力感 ...
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
随机推荐
- Python CSV Reader/Writer 例子--转载
CSV(comma-separated values) 是跨多种形式导入导出数据的标准格式,比如 MySQL.Excel. 它以纯文本存储数和文本.文件的每一行就代表一条数据,每条记录包含了由逗号分隔 ...
- 《剑指offer》第二十六题(树的子结构)
// 面试题26:树的子结构 // 题目:输入两棵二叉树A和B,判断B是不是A的子结构. #include <iostream> struct BinaryTreeNode { doubl ...
- 【Robot Framework 项目实战 00】环境搭建
前言 我们公司在推广RF这个框架做后端接口测试,力求让同事们能更快的完成服务端需求的自动化,作为主导者之一,决定分享一些经验,方便后来者. 我会从安装部署.Request.selenium.自定义框架 ...
- php7 编译 win32ps 模块
碰到了很多问题 ,但最终都解决了,感觉不错. 1)下载 php source, php sdk, 以及 win32ps的源代码 2) 参照下面的连接进行编译. https://wiki.php.net ...
- SpringBoot读取war包jar包Resource资源文件解决办法
SpringBoot读取war包jar包Resource资源文件解决办法 场景描述 在开发过程中我们经常会碰到要在代码中获取资源文件的情况,而我在最近在SpringBoot项目中时碰到一个问题,就是在 ...
- WPF StoryBoard用法
时间:2011-06-15 21:26来源:百度空间 作者:shichen4 点击: 次 StoryBoard使用,Xaml转cs代码 Canvas.Triggers EventTriggerRout ...
- 3-9《元编程》第3章Tuesday:methods
第3章methods Ruby是动态语言,有静态语言实现不了的技巧.本章讲解代码的重构,把代码变得更简洁. 3.2Dynamic Methods 3.21Calling Methods Dynamic ...
- codeforces 497b// Tennis Game// Codeforces Round #283(Div. 1)
题意:网球有一方赢t球算一场,先赢s场的获胜.数列arr(长度为n)记录了每场的胜利者,问可能的t和s. 首先,合法的场景必须: 1两方赢的场数不一样多. 2赢多的一方最后一场必须赢. 3最后一场必须 ...
- Java基础-封装(09)
通过对象直接访问成员变量,会存在数据安全问题(比如年龄不能为负).这个时候,我们就不能让外界的对象直接访问成员变量. private关键字 是一个权限修饰符.可以修饰成员(成员变量和成员方法)被pri ...
- Gluttony CodeForces - 892D (构造,思维)
题面: You are given an array a with n distinct integers. Construct an array b by permuting a such that ...