jQuery lightBox 灯箱效果

前端开发仓库

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

支持
jQuery v1.2.3+

示例

使用方法

载入 CSS 文件

<link rel="stylesheet" href="jquery.lightbox-0.5.css">

载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.lightbox-0.5.js"></script>

DOM 结构

<div id="element_id">
  <a href="image3.jpg" title="文字说明"><img src="thumb_image3.jpg" width="72" height="72"></a>
</div>

调用 lightBox

$('#element_id a').lightBox();
// lightBox 的使用范围是根据 jQuery 选择器来设置的,所以可以有更多的设置方法,例如:
$('a.lightbox').lightBox();
$('a[@rel*=lightbox]').lightBox();

参数说明

名称 默认值 说明
overlayBgColor '#000' 背景色
overlayOpacity 0.8 背景色透明度
fixedNavigation false 是否始终显示上一张、下一张按钮
imageLoading 'images/lightbox-ico-loading.gif' 加载图片时显示的图片
imageBtnPrev 'images/lightbox-btn-prev.gif' 上一张按钮的图片
imageBtnNext 'images/lightbox-btn-next.gif' 下一张按钮的图片
imageBtnClose 'images/lightbox-btn-close.gif' 关闭按钮的图片
imageBlank 'images/lightbox-blank.gif' 上一张、下一张按钮周围空白部分的图片(默认透明)
containerBorderSize 10 展示图片的边框宽度
containerResizeSpeed 400 展示过程切换的速度
txtImage 'Image' 页码辅助文字
txtOf 'of' 页码辅助文字
keyToClose 'c' 关闭展示的快捷键
keyToPrev 'p' 上一张的快捷键
keyToNext 'n' 下一张的快捷键

相关信息

来源:
http://leandrovieira.com/projects/jquery/lightbox/
授权协议:
CC BY-SA