版本:
- jQuery v1.2.3+
- jQuery lightBox v0.5
效果截图:
使用方法:
1、载入 CSS 文件
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css"/>2、载入 JavaScript 文件(根据自己的存放位置修改路径)
<script src="jquery.js"></script> <script src="jquery.lightbox-0.5.js"></script>3、DOM 结构
<div id="element_id"> <a href="image3.jpg" title="文字说明"><img src="thumb_image3.jpg" width="72" height="72"></a> </div>4、调用 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' | 下一张的快捷键 | 

