zblog的lightbox2.0插件总结

效果演示：可以在本站点击任意图片。
1.首先需要下载压缩包：200611111321357512.rar
2.将其中的css文件夹内的文件上传到zblog的css文件夹内
3.将其中的script文件夹内的文件上传到zblog的script文件夹内
4.将整个（注意是整个而不是里面的文件）lightbox文件夹上传到zblog的image文件夹内
------------
做好上述准备之后，开始修改代码了。
------------
5.修改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[roadtrip]"" 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[roadtrip]"" 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[roadtrip]"" title=""""><img src=""$4"" alt="""" title="""" width=""$2""/></a>")

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

6.修改Z-Blog目录/SCRIPT/common.js文件，删除靠近末尾的：

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

7.接下来就在需要加载这种效果的页面加载文件就可以了。例如：在/TEMPLATE/default.html加载，则主页会有这种效果；在/TEMPLATE/single.html加载，那么单独文章的页面就有这种效果...加载方法：
在/TEMPLATE/default.html或/TEMPLATE/single.html（自选）在和之间加入如下代码：

<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" />

-------------------------
至此，lightbox的效果就实现了。
-------------------------

可能遇到的问题：点击图片仍然在新窗口打开
---原因有两种：
1.图片还没有加载完全，需要稍等
2.body标签含有onload关键字，类似于

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">

如果有，可以在后面添加initLightbox()解决问题。如：

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()"

3...如果还有问题，请通知我。

发布:Debugger | 分类:代码收集 | 引用本文 | 发表评论 | 返回顶部