jQuery Lightbox（balupton版）图片展示插件demo

link:http://www.zhangxinxu.com/jq/balupton_zh/demo/

官网：http://leandrovieira.com/projects/jquery/lightbox/

jQuery Lightbox（balupton版）图片展示插件demo

一、Lightbox Tour

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" rel="lightbox-tour" title="张含韵小美女">

简要说明

• 这里a标签的rel值是lightbox-tour，JavaScript文件通过a标签的rel属性自动判断是否要执行lightbox效果
• 显示的图片信息来自a标签的title属性，title内部的文字通过英文的":"冒号属性区分描述的标题和内容，标题样式为粗体，默认含图片链接，内容文字粗细正常，原项目CSS中此处字体大小为10px，但是对于中文而言，10px偏小，所以我已经改为12像素。
• 大图的链接地址直接写在a标签的href上，有时HTML DOM tree尚未完全加载是点击a标签会直接打开图片，可以用name代替href解决这一问题，需修改原JavaScript文件。

二、自动创建lightbox组

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" rel="lightbox-myGroup" title="张含韵小美女">

简要说明

• 这里a标签的rel值是lightbox-myGroup，所谓分组，就是JavaScript会将rel属性一致的a标签划分为一组。只要a标签的rel属性以"lightbox- * "为结构。都可以触发lightbox效果。所以这里的效果与上面Lightbox Tour是一样的，这里的rel改为"lightbox-my"也是一样的效果。

三、独立的lightbox效果

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" rel="lightbox" title="张含韵小美女">

简要说明

• 与上面分组示例唯一的差别就是这里a标签的rel值是lightbox，没有任何后缀。这里的lightbox就是关键，当rel为lightbox时，JavaScript会将此a标签下的img图片当作一个独立的个体来处理，即没有“上一张”，“下一张”的图片切换。

四、手动创建分组

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" title="张含韵小美女">

$(function(){
	$("#manualGroup a").lightbox();		   
});

简要说明

• 这里与上面不同，上面的实例都是通过a标签的rel值判断是否是要应用lightbox效果。而这里没有rel属性，是手动创建分组，方法就是$("选择器").lightbox();
• 本实例可以说是最简单的手动创建lightbox效果的例子了，lightbox效果还有其他的些方法，下面会有简要介绍。

五、一些参数使用举例

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" title="张含韵小美女">

$(function(){
    $("#paramsTest a").lightbox();	
    //------------------     $.Lightbox.construct({
        show_linkback: false,
        opacity: 0.6,
        text: {
            image: '照片'
        }
    });		   
});

简要说明

• 这里示例的几个参数有三个，依次表示：是否显示右上角的反向链接（false不显示），黑色覆盖层透明度（0.6，默认是0.9），其中的一个文字替换为“照片”（原来是“图片”，原项目js中为"image"）
• 为了显示效果是由于这里的点击失效的，所以js代码中添加了一个简单的判读。
• 此插件参数总共将近20个，关于这些参数的些详细信息您可以点击这里。

转载于:https://my.oschina.net/willSoft/blog/35955