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

  • 版本:
  • 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. 列举一些有所帮助的blog和文章

    w3school hdoj imooc CSDN Github myGithub CmdMarkdown 一直在路上--记我从初中到本科近十年的学习成长历程 作者:周见智 C++中队列的建立与操作详细 ...

  2. js文字转移效果

    这个例子算是有点样子的. 思路: 字符串操作.左框里面先是预设的.点击按钮时截取左框中的字符串的前一个字符到右框里的字符串后面,以此循环.点击按钮时按钮变为灰色,在循环完成后恢复.计数的总数(右边)是 ...

  3. testlogin

    !/usr/bin/env python coding:utf-8 import requests import unittest import json,urllib class testlogin ...

  4. 机器学习-数据可视化神器matplotlib学习之路(三)

    之前学习了一些通用的画图方法和技巧,这次就学一下其它各种不同类型的图.好了先从散点图开始,上代码: from matplotlib import pyplot as plt import numpy ...

  5. c++ 算法 栅格中两点之间连线

    屏幕划线,通过平面坐标系实现,基本组成是一个一个的点,起点为A,终点为B 本文的算法,可以实现平面栅格中,指定的A,B两点之间进行连线(代码中仅打印了两点间需要画出的坐标点) #include < ...

  6. ros 编译指定包

    一.编译到devel目录在工作空间下(有devel文件夹的那个目录)执行 catkin_make --pkg 包名 如果报错,执行catkin_make -DCATKIN_WHITELIST_PACK ...

  7. 【Golang 接口自动化08】使用标准库httptest完成HTTP请求的Mock测试

    前言 Mock是一个做自动化测试永远绕不过去的话题.本文主要介绍使用标准库net/http/httptest完成HTTP请求的Mock的测试方法. 可能有的小伙伴不太了解mock在实际自动化测试过程中 ...

  8. nginx反向代理和正向代理,优缺点

    http://blog.csdn.net/lishaojun0115/article/details/53200629 nginx反向代理代理的是服务器,正向代理代理的是客户端, 反向代理是客户点发送 ...

  9. ln软连接

    ln软连接 ln -s 源目录/文件    目标目录/文件 例如,有个应用 /var/www/html/webapp,下面有个logs日志文件夹,想吧  webapp/logs日志文件夹链到/home ...

  10. [.NET开发] C# 如何创建Excel多级分组

    要设置显示或者隐藏分类数据下的详细信息,在便于数据查看.管理的同时也使文档更具美观性.那么,在C#中如何来创建Excel数据的多级分组显示呢?下面将进行详细阐述.方法中使用了免费版组件Free Spi ...