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

  • 版本:
  • 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. samtools一些文档

    https://github.com/samtools/hts-specs

  2. linux——压缩解压命令学习简单笔记

    一: 命令名称:gzip 命令英文原意:GNU zip 命令所在路径:/bin/gzip 执行权限:所有用户 语法:gzip 选项 [文件] 功能描述:压缩文件 压缩后文件格式:.gz 1:只能压缩文 ...

  3. WPF基础学习笔记整理 (七) Binding绑定

    基础知识: 数据绑定是一种关系,该关系告诉WPF从源对象提取一些信息,并用这些信息设置目标对象的属性:目标对象始终是依赖属性,而源对象则可以是任何内容. BindingOperations类,提供静态 ...

  4. java日期获取前一天和后一天

    import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Calendar;import j ...

  5. rem的计算

    (function (doc, win) { console.log("dpr:"+win.devicePixelRatio); var docEle = doc.document ...

  6. Python BeautifulSoup的使用

    2017-07-24 22:39:14 Python3 中的beautifulsoup引入的包是bs4 import requests from bs4 import * r = requests.g ...

  7. laravel command

    (1) 新建一个command类,并在command类里面写相应的执行函数 其中变量act就是指函数名,handle里面会先判断该函数是不是存在,如果存在就执行,如果不存在就提示函数不存在 class ...

  8. 『PyTorch』第二弹重置_Tensor对象

    『PyTorch』第二弹_张量 Tensor基础操作 简单的初始化 import torch as t Tensor基础操作 # 构建张量空间,不初始化 x = t.Tensor(5,3) x -2. ...

  9. UVA-701 The Archeologists' Dilemma (数论)

    题目大意:给了一个2^E的前缀n,已知前缀n的位数不到2^E的位数的一半,找出满足条件的最小E. 题目解析:设2^E为i位数,则有n*10^i<2^E<(n+1)*10^i.解不等式得到i ...

  10. Leetcode 115

    Ø r a b b b i t Ø r a b b i t class Solution { public: int numDistinct(string s, string t) { ; ; int ...