【转】jQuery Lightbox 2 灯箱效果

转载出处：http://code.ciaoca.com/jquery/lightbox2/

使用方法

载入 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 Lightbox 展示时，显示的标题或说明文字 href Lightbox 展示时，显示的图片

参数说明

注意：目前除了修改源码，不能在调用的时候修改参数（因为是自动调用的，并且参数没有暴露到外部），期待以后的更新完善该功能。

名称 默认值 说明 fadeDuration 500 透明效果过渡时间 (ms) fitImagesInViewport true 根据窗口大小自动调整图片尺寸 resizeDuration 700 尺寸变化效果过渡时间 positionFromTop 50 与顶部的距离 (px) showImageNumberLabel true 显示页码标签 alwaysShowNavOnTouchDevices false 在触摸设备上始终显示上下页按钮 wrapAround false 持续显示上下页按钮

相关信息

作者网站：http://lokeshdhakar.com/projects/lightbox2/

相关文档：Github 中文文档