最新消息:

第35款插件:jquery.lightbox.js经典的弹出层插件(参数说明已经翻译成中文)

图片幻灯插件 杨红伟 5605浏览 0评论

描述:jquery.lightbox-0.5.jsLightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的。今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件。

图片展示:

1

兼容浏览器: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/demo/lightbox
打包下载:http://www.ijquery.cn/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]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址