我爱我家

        Lightbox是一个很流行的网页图片效果，尤其在图片会自动缩小为缩略图时尤其实用。
　　具体效果可见：http://www.huddletogether.com/projects/lightbox2/
　　程序下载地址：http://www.huddletogether.com/projects/lightbox2/lightbox2.02.zip
　　现将具体步骤说明如下：
　　首先下载Lightbox 2.02
　　解压缩后得到css、images、js三个目录以及index.htm文件，其中index.htm是演示和说明文档。
　　1. 在Z-Blog目录下的IMAGE里新建一个lightbox目录，将images内除了image-1.jpg和thumb-1.jpg以外的文件都上传进去。
　　2. 用文本编辑器打开js目录下的lightbox.js文件，修改如下：
　　查找替换字符串 images/ ，修改为http://URL/IMAGE/lightbox/ 记住一定要加上 /。
　　3. 用文本编辑器打开css目录下的lightbox.css文件，查找替换 ../images/ 为http://URL/IMAGE/lightbox/ 同样记住一定要加上 / 。
　　4. 将lightbox.css上传到Z-Blog目录的CSS目录下。
　　5. 将js目录下所有文件上传到Z-Blog目录的SCRIPT目录下。
　　6. 修改Z-Blog目录/FUNCTION/c_function.asp文件，在728行处开始。
　　原代码：

objRegExp.Pattern="(\[IMG=)([0-9]*),([0-9]*),([^\n\[]*)(\])(.+?)(\[\/IMG\])"
strContent= objRegExp.Replace(strContent,"<img src=""$6"" alt=""$4"" title=""$4"" width=""$2"" height=""$3""/>")

objRegExp.Pattern="(\[IMG=)([0-9]*),([^\n\[]*)(\])(.+?)(\[\/IMG\])"
strContent= objRegExp.Replace(strContent,"<img src=""$5"" alt=""$3"" title=""$3"" width=""$2""/>")

objRegExp.Pattern="(\[IMG=)([0-9]*)(\])(.+?)(\[\/IMG\])"
strContent= objRegExp.Replace(strContent,"<img src=""$4"" alt="""" title="""" width=""$2""/>")

objRegExp.Pattern="(\[IMG\])(.+?)(\[\/IMG\])"
strContent= objRegExp.Replace(strContent,"<img onload=""ResizeImage(this,"&ZC_IMAGE_WIDTH&")"" src=""$2"" alt="""" title=""""/>")


objRegExp.Pattern="(\[IMG_LEFT=)([0-9]*),([0-9]*),([^\n\[]*)(\])(.+?)(\[\/IMG_LEFT\])"
strContent= objRegExp.Replace(strContent,"<img class=""float-left"" style=""float:left"" src=""$6"" alt=""$4"" title=""$4"" width=""$2"" height=""$3""/>")

objRegExp.Pattern="(\[IMG_LEFT=)([0-9]*),([^\n\[]*)(\])(.+?)(\[\/IMG_LEFT\])"
strContent= objRegExp.Replace(strContent,"<img class=""float-left"" style=""float:left"" src=""$5"" alt=""$3"" title=""$3"" width=""$2""/>")

objRegExp.Pattern="(\[IMG_LEFT=)([0-9]*)(\])(.+?)(\[\/IMG_LEFT\])"
strContent= objRegExp.Replace(strContent,"<img class=""float-left"" style=""float:left"" src=""$4"" alt="""" title="""" width=""$2""/>")

objRegExp.Pattern="(\[IMG_LEFT\])(.+?)(\[\/IMG_LEFT\])"
strContent= objRegExp.Replace(strContent,"<img onload=""ResizeImage(this,"&ZC_IMAGE_WIDTH&")"" class=""float-left"" style=""float:left"" src=""$2"" alt="""" title=""""/>")


objRegExp.Pattern="(\[IMG_RIGHT=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG_RIGHT\])"
strContent= objRegExp.Replace(strContent,"<img class=""float-right"" style=""float:right"" src=""$6"" alt=""$4"" title=""$4"" width=""$2"" height=""$3""/>")

objRegExp.Pattern="(\[IMG_RIGHT=)([0-9]*),(.*)(\])(.+?)(\[\/IMG_RIGHT\])"
strContent= objRegExp.Replace(strContent,"<img class=""float-right"" style=""float:right"" src=""$5"" alt=""$3"" title=""$3"" width=""$2""/>")

objRegExp.Pattern="(\[IMG_RIGHT=)([0-9]*)(\])(.+?)(\[\/IMG_RIGHT\])"
strContent= objRegExp.Replace(strContent,"<img class=""float-right"" style=""float:right"" src=""$4"" alt="""" title="""" width=""$2""/>")

objRegExp.Pattern="(\[IMG_RIGHT\])(.+?)(\[\/IMG_RIGHT\])"
strContent= objRegExp.Replace(strContent,"<img onload=""ResizeImage(this,"&ZC_IMAGE_WIDTH&")"" class=""float-right"" style=""float:right"" src=""$2"" alt="""" title=""""/>")

　　修改为：

objRegExp.Pattern="(\[IMG=)([0-9]*),([0-9]*),([^\n\[]*)(\])(.+?)(\[\/IMG\])"
strContent= objRegExp.Replace(strContent,"<a href=""$6"" rel=""lightbox"" title=""$4""><img src=""$6"" alt=""$4"" title=""$4"" width=""$2"" height=""$3""/></a>")

objRegExp.Pattern="(\[IMG=)([0-9]*),([^\n\[]*)(\])(.+?)(\[\/IMG\])"
strContent= objRegExp.Replace(strContent,"<a href=""$5"" rel=""lightbox"" title=""$3""><img src=""$5"" alt=""$3"" title=""$3"" width=""$2""/></a>")

objRegExp.Pattern="(\[IMG=)([0-9]*)(\])(.+?)(\[\/IMG\])"
strContent= objRegExp.Replace(strContent,"<a href=""$4"" rel=""lightbox"" title=""""><img src=""$4"" alt="""" title="""" width=""$2""/></a>")

objRegExp.Pattern="(\[IMG\])(.+?)(\[\/IMG\])"
strContent= objRegExp.Replace(strContent,"<a href=""$2"" rel=""lightbox"" title=""""><img onload=""ResizeImage(this,"&ZC_IMAGE_WIDTH&")"" src=""$2"" alt="""" title=""""/></a>")


objRegExp.Pattern="(\[IMG_LEFT=)([0-9]*),([0-9]*),([^\n\[]*)(\])(.+?)(\[\/IMG_LEFT\])"
strContent= objRegExp.Replace(strContent,"<a href=""$6"" rel=""lightbox"" title=""$4""><img class=""float-left"" style=""float:left"" src=""$6"" alt=""$4"" title=""$4"" width=""$2"" height=""$3""/></a>")

objRegExp.Pattern="(\[IMG_LEFT=)([0-9]*),([^\n\[]*)(\])(.+?)(\[\/IMG_LEFT\])"
strContent= objRegExp.Replace(strContent,"<a href=""$5"" rel=""lightbox"" title=""$3""><img class=""float-left"" style=""float:left"" src=""$5"" alt=""$3"" title=""$3"" width=""$2""/></a>")

objRegExp.Pattern="(\[IMG_LEFT=)([0-9]*)(\])(.+?)(\[\/IMG_LEFT\])"
strContent= objRegExp.Replace(strContent,"<a href=""$4"" rel=""lightbox"" title=""""><img class=""float-left"" style=""float:left"" src=""$4"" alt="""" title="""" width=""$2""/></a>")

objRegExp.Pattern="(\[IMG_LEFT\])(.+?)(\[\/IMG_LEFT\])"
strContent= objRegExp.Replace(strContent,"<a href=""$2"" rel=""lightbox"" title=""""><img onload=""ResizeImage(this,"&ZC_IMAGE_WIDTH&")"" class=""float-left"" style=""float:left"" src=""$2"" alt="""" title=""""/></a>")


objRegExp.Pattern="(\[IMG_RIGHT=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG_RIGHT\])"
strContent= objRegExp.Replace(strContent,"<a href=""$6"" rel=""lightbox"" title=""$4""><img class=""float-right"" style=""float:right"" src=""$6"" alt=""$4"" title=""$4"" width=""$2"" height=""$3""/></a>")

objRegExp.Pattern="(\[IMG_RIGHT=)([0-9]*),(.*)(\])(.+?)(\[\/IMG_RIGHT\])"
strContent= objRegExp.Replace(strContent,"<a href=""$5"" rel=""lightbox"" title=""$3""><img class=""float-right"" style=""float:right"" src=""$5"" alt=""$3"" title=""$3"" width=""$2""/></a>")

objRegExp.Pattern="(\[IMG_RIGHT=)([0-9]*)(\])(.+?)(\[\/IMG_RIGHT\])"
strContent= objRegExp.Replace(strContent,"<a href=""$4"" rel=""lightbox"" title=""""><img class=""float-right"" style=""float:right"" src=""$4"" alt="""" title="""" width=""$2""/></a>")

objRegExp.Pattern="(\[IMG_RIGHT\])(.+?)(\[\/IMG_RIGHT\])"
strContent= objRegExp.Replace(strContent,"<a href=""$2"" rel=""lightbox"" title=""""><img onload=""ResizeImage(this,"&ZC_IMAGE_WIDTH&")"" class=""float-right"" style=""float:right"" src=""$2"" alt="""" title=""""/></a>")

　　修改完毕保存。
　　7. 打开Z-Blog目录/TEMPLATE/single.html文件，在<head>和</head>之间加上如下代码：

<script type="text/javascript" src="<#ZC_BLOG_HOST#>SCRIPT/prototype.js"></script>
<script type="text/javascript" src="<#ZC_BLOG_HOST#>SCRIPT/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<#ZC_BLOG_HOST#>SCRIPT/lightbox.js"></script>
<link rel="stylesheet" href="<#ZC_BLOG_HOST#>CSS/lightbox.css" type="text/css" media="screen" />

　　8. 同样地修改search.html catalog.html default.html三个文件，保存。
　　9. 修改Z-Blog目录/SCRIPT/common.js文件，删除末尾的：

objImage.attachEvent('onclick', function(){try{showModelessDialog(objImage.src);}catch(e){window.open(objImage.src);}});

　　10.修改default.html中的

原代码：

<body class="multi default">

修改为：

<body class="multi default" onload="initLightbox()">

         保存退出。

        11.修改single.html中的

原代码：

<body class="single">

修改为：

<body class="single" onload="initLightbox()">

         保存退出。

  附：官方的js冲突解决办法

点击图片时只是在新页面打开怎么办？这通常是JS脚本冲突所致。查看你页面的标签，看是否有类似 这样的onload属性。如果有，可以在后面添加initLightbox()解决问题。如：

PS：修改lightbox可以浏览该页面所有图片的方法：

在WEB的FUNCTION目录下找到c_function.asp文件,然后在728行处开始。只要有rel=""lightbox""的地方全部修改成rel=""lightbox[roadtrip]""，保存退出即可。