jQuery lightBox插件图片点击放大--HTML5中文学习网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<script type="text/javascript" src="http://www.html5cn.com.cn/skin/default/js/jquery1.2.js"></script>
<script type="text/javascript" src="http://www.html5cn.com.cn/skin/default/js/lightbox.js"></script>
<link type="text/css" href="http://www.html5cn.com.cn/skin/default/css/jquery.lightbox.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
	
	$('#gallery a').lightBox();

});
</script>
<title>无标题文档</title>
</head>
<body>
<div id="gallery">
<ul>
<li> <a title="1" href="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg" _fcksavedurl="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg"> <img width="72" height="72" alt="" src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image2.jpg" _fcksavedurl="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image2.jpg"> </a> </li>
<li> <a title="1" href="http://leandrovieira.com/projects/jquery/lightbox/photos/image3.jpg" _fcksavedurl="http://leandrovieira.com/projects/jquery/lightbox/photos/image3.jpg"> <img width="72" height="72" alt="" src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image3.jpg" _fcksavedurl="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image3.jpg"> </a> </li>
<li> <a title="1" href="http://leandrovieira.com/projects/jquery/lightbox/photos/image5.jpg" _fcksavedurl="http://leandrovieira.com/projects/jquery/lightbox/photos/image5.jpg"> <img width="72" height="72" alt="" src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image5.jpg" _fcksavedurl="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image5.jpg"> </a> </li>
</ul>
<script type="text/javascript">
/*250*250，创建于2013-1-29*/
var cpro_id = "u1204677";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
</div>
</body>
</html>

运行代码 保存代码 提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

一、Lightbox Tour

<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代码中添加了一个简单的判读。