您的位置:首页 > Web前端 > JQuery

jQuery lightBox plugin 灯箱效果

2014-03-29 11:43 369 查看
一个灯箱效果的图片展示插件。

版本:jQuery v1.2.3+jQuery lightBox v0.5
注意事项:1.需载入 css 文件,配合使用(也可以合并到你的 css 文件中)2.链接属性:<a href="图片地址" title="文字说明"></a>
在源文件(css 和 js)基础上有进行修改,修改如下:

1.修改了参数中5张图片的默认值,并更换了图片进行美化;

2.去除了"txtImage"、"txtOf"参数,文字固定为:"共X张 第N张"。

修改版:jQuery lightBox plugin 灯箱效果
原 版:jquery lightbox 0.5

【示例】

















【options 参数说明】

名称默认值说明
overlayBgColor"#000"背景色
overlayOpacity0.8背景色透明度
fixedNavigationfalse是否始终显示上一张、下一张按钮
imageLoading"img/lightbox-0.5/lightbox-ico-loading.gif"加载图片时显示的图片
imageBtnPrev"img/lightbox-0.5/lightbox-btn-prev.gif"上一张按钮的图片
imageBtnNext"img/lightbox-0.5/lightbox-btn-next.gif"下一张按钮的图片
imageBtnClose"img/lightbox-0.5/lightbox-btn-close.gif"关闭按钮的图片
imageBlank"img/lightbox-0.5/lightbox-blank.gif"上一张、下一张按钮周围空白部分的图片(默认透明)
containerBorderSize10展示图片的边框宽度
containerResizeSpeed400展示过程切换的速度
keyToClose"c"关闭展示的快捷键
keyToPrev"p"上一张的快捷键
keyToNext"n"下一张的快捷键

【使用方法】

载入 CSS 文件

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

载入 JavaScript 文件

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

DOM 结构

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

调用 lightBox

$("#gallery a").lightBox();
// lightBox 的使用范围是根据 jQuery 选择器来设置的,所以可以有更多的设置方法,例如:
$("a[@rel*=lightbox]").lightBox();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: