打印

Lightbox v2.0 添加方法

haozi04

注册会员

Rank: 2 Rank: 2

金钱: 603 ZB

发短消息
加为好友
当前离线

1^# 大中小发表于 2006-8-20 02:05 只看该作者

Lightbox v2.0 添加方法

Lightbox是一个很流行的网页图片效果，尤其在图片会自动缩小为缩略图时尤其实用。
具体效果可见：http://www.huddletogether.com/projects/lightbox2/
程序下载地址：

经过一段时间摸索，加上zx的友情提醒，终于成功地在Z-BLOG 1.6 Final Build 060816上安装成功。
安装后效果可见：http://www.haozi04.net/beta/

注意：

由于Lightbox采用<a>标记来实现js，因此使用Lightbox后可能导致图片链接失效，请慎用！
针对图片的js可能导致Lightbox失效，解决办法参见文末。

现将具体步骤说明如下：

首先下载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/ ，修改为你的blog的URL/IMAGE/lightbox/ 记住一定要加上 / 。保存。
比如我的blog在http://www.haozi04.net/beta/，就把所有的 images/ 替换为 http://www.haozi04.net/beta/IMAGE/lightbox/

3. 用文本编辑器打开css目录下的lightbox.css文件，查找替换 ../images/ 为你的blog的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/default.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. 同样地修改 single.html search.html catalog.html 三个文件，保存。

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

复制内容到剪贴板

代码:

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

10. 重建。

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

引用:

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

附件: 您所在的用户组无法下载或查看附件

TOP

teol

新手上路

Rank: 1

金钱: 600 ZB

发短消息
加为好友
当前离线

2^# 大中小发表于 2006-8-21 12:16 只看该作者

很好我用了多谢

TOP

月上之木

管理组

Rank: 13

游走中。。。

金钱: 17898 ZB

2007年论坛霸主 [月度人气奖章] 2008年先进斑竹 [工蜂奖章]

发短消息
加为好友
当前离线

3^# 大中小发表于 2006-8-21 15:07 只看该作者

好帅气的效果呀~厉害!

Z_ | Z-BLOG使用小贴士 | 主题移植教程-图解模板

TOP

上来下去

新手上路

Rank: 1

金钱: 600 ZB

发短消息
加为好友
当前离线

4^# 大中小发表于 2006-9-3 02:29 只看该作者

点击图片时只是在新页面打开怎么办？
这通常是JS脚本冲突所致。查看你页面的<body>标签，看是否有类似 <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;"> 这样的onload属性。如果有，可以在后面添加initLightbox()解决问题。如：<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

怎么这个方法不行.请问是那个页面~~~~

TOP

haozi04

注册会员

Rank: 2 Rank: 2

金钱: 603 ZB

发短消息
加为好友
当前离线

5^# 大中小发表于 2006-9-4 09:23 只看该作者

如果网页没有载入完全，Lightbox是不会有效的。请检查你载入网页时下方的进度条。

TOP

海浪子

新手上路

Rank: 1

金钱: 600 ZB

发短消息
加为好友
当前离线

6^# 大中小发表于 2006-9-4 15:41 只看该作者

好炫的效果，多谢！

TOP

jifforever

中级会员

Rank: 3

金钱: 1917 ZB

发短消息
加为好友
当前离线

7^# 大中小发表于 2006-9-8 09:49 只看该作者

我的弄了后图片没有缩小啊，而且点击图片液没有任何效果，555
who帮俺看看是怎么回事啊

我是连接网络上的一张图片的

死鱼的淡水海岸

TOP

id_cjd000

新手上路

Rank: 1

金钱: 597 ZB

发短消息
加为好友
当前离线

8^# 大中小发表于 2006-10-28 22:48 只看该作者

js冲突啊！！

我装上这个效果！！

不过，我以前的那个节日提醒功能就废啦啦！！！

节日提醒功能在此：

http://bbs.rainbowsoft.org/viewthread.php?tid=717&highlight=%BD%DA%C8%D5

我仔细看了一下是  prototype.js 和  calendar.js 的冲突！！

好像是这句：

Object.inspect = function(object) {
  try {
if (object == undefined) return 'undefined';
if (object == null) return 'null';
return object.inspect ? object.inspect() : object.toString();
  } catch (e) {
if (e instanceof RangeError) return '...';
throw e;
  }
}

导致：
行:262
字符:2
代码:0
错误:对象不支持此属性或方法

删除的话，节日提醒就可以用，但是有其它错，lightbox效果就没啦！！！

小弟对js不是很懂,有哪位大侠帮忙？？？
当然以上这是我的推断，也有可能是其它错误！！
在这先谢过！！！！

[ 本帖最后由 id_cjd000 于 2006-10-28 22:58 编辑 ]

TOP

id_cjd000

新手上路

Rank: 1

金钱: 597 ZB

发短消息
加为好友
当前离线

9^# 大中小发表于 2006-10-30 16:02 只看该作者

斑竹帮忙看看！

请各位务必看看！是哪处的问题？？？

[ 本帖最后由 id_cjd000 于 2006-11-1 12:43 编辑 ]

人在旅途

TOP

lockice

注册会员

Rank: 2 Rank: 2

金钱: 601 ZB

发短消息
加为好友
当前离线

10^# 大中小发表于 2006-10-31 17:42 只看该作者

非常好的东西

这东西不赖!

可以参看我的:http://blog.shangc.cn/

冰锁---网络，技术，新闻，文摘，评论，生活

http://www.lockice.com/

TOP

grunge520

新手上路

Rank: 1

金钱: 600 ZB

发短消息
加为好友
当前离线

11^# 大中小发表于 2006-11-10 15:03 只看该作者

照楼主的修改了，没反应，
http://www.07-media.com/blog/
是哪里出问题呢？

TOP

likk

离退组

Rank: 8 Rank: 8 Rank: 8 Rank: 8

金钱: 1063 ZB

离退纪念勋章

发短消息
加为好友
当前离线

12^# 大中小发表于 2006-11-11 21:01 只看该作者

确实不错。效果也可以参见我的blog

http://www.likk.com/blog/

TOP

Z-Blog 1.8 Spirit Build 80722下载	Wordpress数据导入插件 for 1.8	PJBlog2 to Z-Blog数据库转换程序	LBS2 to Z-Blog数据库转换程序
Z-BLOG使用小贴士收集	如何配置Z-Blog高阶学习手册	Windows Live Writer支持插件	[BFXML友情链接插件]