描述:jquery.lightbox-0.5.jsLightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的。今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件。
图片展示:
兼容浏览器:IE6+/Firefox/Chrome
官方链接:暂无
JS下载:http://www.ijquery.cn/js/lightbox/jquery.lightbox-0.5.js
对应CSS:http://www.ijquery.cn/js/lightbox/jquery.lightbox-0.5.css
预览: http://www.ijquery.cn/study/demo/lightbox
打包下载:http://www.ijquery.cn/study/demo/lightbox/lightbox.zip
参数说明:
overlayBgColor: '#000', // 暗箱的背景色
overlayOpacity: 0.8, //暗箱的透明度,从0.1-0.9
// 相关的导航设置
fixedNavigation: false, // 没有看出效果?
// 相关导航图片设置
imageLoading: 'lightbox-ico-loading.gif', // 加载的图片
imageBtnPrev: 'lightbox-btn-prev.gif', // 上一张图片
imageBtnNext: 'lightbox-btn-next.gif', // 下一张图片
imageBtnClose: 'lightbox-btn-close.gif', // 关闭图片
imageBlank: 'lightbox-blank.gif', // 1px的空白图片
// 内容里的图片设置
containerBorderSize: 10, //包含图片的border设置,最好为10
containerResizeSpeed: 400, //图片切换速度
// 配置相关标题,例如: Image 2 of 8.你可以自定义文字.
txtImage: 'Image', // 自定义文字,中国人可以写成'图片'或者其他文字
txtOf: 'of', // 自定义of
// 配置键盘设置
keyToClose: 'c', // 用键盘 c 关闭
keyToPrev: 'p', // 用键盘 p 上一张
keyToNext: 'n', // 用键盘 n 下一张
// 官方提示:不要更改这些变量
imageArray: [],
activeImage: 0
HTML代码:
[html][/html]
<div id="gallery">
<ul>
<li><a href="photos/image1.jpg" title="第一张图片"><img src="photos/thumb_image1.jpg" width="78" height="78" alt="" /></a></li>
<li><a href="photos/image2.jpg" title="第一张图片"><img src="photos/thumb_image2.jpg" width="78" height="78" alt="" /></a></li>
</ul>
</div>
JS引用代码:
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/lightbox/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
[/js]
CSS代码:
[css]
<link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/lightbox/jquery.lightbox-0.5.css" />
[/css]