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

  • 版本:
  • 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 持续显示上下页按钮

一款经典的 jQuery Lightbox 灯箱效果的更多相关文章

  1. 20款美化网站的 jQuery Lightbox 灯箱插件

    jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...

  2. FancyBox - 经典的 jQuery Lightbox 插件

    FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...

  3. lightBox灯箱效果

    最近想做一个类似QQ空间相册,点击照片会出现一个遮罩层,然后显示照片,可以左右切换照片,上网查了,原来叫灯箱效果,于是自己也写了一个简单的灯箱效果,并进行了简单封装,封装得不是很完善,后面还需要改进, ...

  4. 一款经典的jQuery slidizle 幻灯片

    jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...

  5. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

  6. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  7. 拍案惊奇!9款神奇的jQuery/CSS3经典插件

    款非常给力的jQuery/CSS3经典插件,插件包括CSS3图片特效.jQuery动画菜单.jQuery时尚登录表单等,一起来看看这些jQuery插件. .CSS3图片重力感应特效 这是一款应用重力感 ...

  8. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  9. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

随机推荐

  1. Python CSV Reader/Writer 例子--转载

    CSV(comma-separated values) 是跨多种形式导入导出数据的标准格式,比如 MySQL.Excel. 它以纯文本存储数和文本.文件的每一行就代表一条数据,每条记录包含了由逗号分隔 ...

  2. 《剑指offer》第二十六题(树的子结构)

    // 面试题26:树的子结构 // 题目:输入两棵二叉树A和B,判断B是不是A的子结构. #include <iostream> struct BinaryTreeNode { doubl ...

  3. 【Robot Framework 项目实战 00】环境搭建

    前言 我们公司在推广RF这个框架做后端接口测试,力求让同事们能更快的完成服务端需求的自动化,作为主导者之一,决定分享一些经验,方便后来者. 我会从安装部署.Request.selenium.自定义框架 ...

  4. php7 编译 win32ps 模块

    碰到了很多问题 ,但最终都解决了,感觉不错. 1)下载 php source, php sdk, 以及 win32ps的源代码 2) 参照下面的连接进行编译. https://wiki.php.net ...

  5. SpringBoot读取war包jar包Resource资源文件解决办法

    SpringBoot读取war包jar包Resource资源文件解决办法 场景描述 在开发过程中我们经常会碰到要在代码中获取资源文件的情况,而我在最近在SpringBoot项目中时碰到一个问题,就是在 ...

  6. WPF StoryBoard用法

    时间:2011-06-15 21:26来源:百度空间 作者:shichen4 点击: 次 StoryBoard使用,Xaml转cs代码 Canvas.Triggers EventTriggerRout ...

  7. 3-9《元编程》第3章Tuesday:methods

    第3章methods Ruby是动态语言,有静态语言实现不了的技巧.本章讲解代码的重构,把代码变得更简洁. 3.2Dynamic Methods 3.21Calling Methods Dynamic ...

  8. codeforces 497b// Tennis Game// Codeforces Round #283(Div. 1)

    题意:网球有一方赢t球算一场,先赢s场的获胜.数列arr(长度为n)记录了每场的胜利者,问可能的t和s. 首先,合法的场景必须: 1两方赢的场数不一样多. 2赢多的一方最后一场必须赢. 3最后一场必须 ...

  9. Java基础-封装(09)

    通过对象直接访问成员变量,会存在数据安全问题(比如年龄不能为负).这个时候,我们就不能让外界的对象直接访问成员变量. private关键字 是一个权限修饰符.可以修饰成员(成员变量和成员方法)被pri ...

  10. Gluttony CodeForces - 892D (构造,思维)

    题面: You are given an array a with n distinct integers. Construct an array b by permuting a such that ...