图片预览组件--lightbox(非常漂亮哦~)

来源:
http://www.huddletogether.com/projects/lightbox2/

□■按此看范例■□

只要点那个图就知道咯~

我的论坛已经整合叻= =||不过要注册...闲着没事的可以来看看
表说我打广告..
http://yapayapa.com

说明:此插件可以美化图片预览效果,我把它在DZ的代码放出来~希望大家喜欢~~
同时,请注意以下问题:
*1.对于本站附件一般都能显示,可是对于图片链接,如果图太大,将会造成在窗口打开~
*2.对于壁纸或者照片那些,类似的大图片,原始图过大会导致点击图片后响应速度很慢,虽然配有loading,但是无法关闭半透明的展示图层.所以请斟酌使用~
*3.此插件不会影响论坛速度,只有点图片才有响应~

一般适用于所有页面
对DZ的修改
1.header.htm中

{template css}下面加上

1. <script type="text/javascript" src="js/prototype.js"></script>
   
2. <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
   
3. <script type="text/javascript" src="js/lightbox.js"></script>
   
4. <script language="JavaScript" src="include/common.js"></script>
   
5. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

复制代码

2.viewthread.htm

寻找

1. <img src="attachment.php?aid=$attach[aid]&noupdate=yes" border="0" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='{lang image_open_zoom}';}" onmouseover="if(this.resized) this.style.cursor='hand';" onclick="if(!this.resized) {return false;} else {window.open('attachment.php?aid=$attach[aid]');}" onmousewheel="return imgzoom(this);">

复制代码

之前加入

1. <a href="attachment.php?aid=$attach[aid]&noupdate=yes" rel="lightbox">

复制代码

再找

1. onclick="if(!this.resized) {return false;} else {window.open('attachment.php?aid=$attach[aid]');}"

复制代码

将上面语句删除(避免和href代码冲突!)

最后找

1. onmousewheel="return imgzoom(this);">

复制代码

在其后加入

1. </a>

复制代码

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------

寻找

1. <img src="$attachurl/$attach[attachment]" border="0" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='{lang image_open_zoom}';}" onmouseover="if(this.resized) this.style.cursor='hand';" onclick="if(!this.resized) {return false;} else {window.open('$attachurl/$attach[attachment]');}" onmousewheel="return imgzoom(this);">

复制代码

之前加入

1. <a href="$attachurl/$attach[attachment]" rel="lightbox">

复制代码

再找

1. onclick="if(!this.resized) {return false;} else {window.open('$attachurl/$attach[attachment]');}"

复制代码

将上面语句删除(避免和href代码冲突!)

最后找

1. onmousewheel="return imgzoom(this);">

复制代码

在其后加入

1. </a>

复制代码

3.include/discuzcode.func.php

查找

1. <img src="attachment.php?aid=$attach[aid]&noupdate=yes" border="0" onload="if(this.width>screen.width*0.45) {this.resized=true; this.width=screen.width*0.45; this.alt='$language[attach_img_zoom]';}" onmouseover="if(this.resized) this.style.cursor='hand';" onclick="if(!this.resized) {return false;} else {window.open('attachment.php?aid=$attach[aid]');}" onmousewheel="return imgzoom(this);">" : "<img src="$attachurl/$attach[attachment]" border="0" onload="if(this.width>screen.width*0.45) {this.resized=true; this.width=screen.width*0.45; this.alt='$language[attach_img_zoom]';}" onmouseover="if(this.resized) this.style.cursor='hand';" onclick="if(!this.resized) {return false;} else {window.open('".addslashes("$attachurl/$attach[attachment]")."');}" onmousewheel="return imgzoom(this);">");

复制代码

之前加入

1. <a href="attachment.php?aid=$attach[aid]&noupdate=yes" rel="lightbox">

复制代码

再找

1. onclick="if(!this.resized) {return false;} else {window.open('attachment.php?aid=$attach[aid]');}"

复制代码

将上面语句删除(避免和href代码冲突!)

最后找

1. onmousewheel="return imgzoom(this);">

复制代码

在其后加入

1. </a>

复制代码

查找

1. "bbcodeurl('\\1', '<img src="%s" border="0" onload="if(this.width>screen.width*0.45) {this.resized=true; this.width=screen.width*0.45; this.alt=\'Click here to open new window\\nCTRL+Mouse wheel to zoom in/out\';}" onmouseover="if(this.width>screen.width*0.45) {this.resized=true; this.width=screen.width*0.45; this.style.cursor=\'hand\'; this.alt=\'Click here to open new window\\nCTRL+Mouse wheel to zoom in/out\';}" onclick="if(!this.resized) {return true;} else {window.open(\'%s\');}" onmousewheel="return imgzoom(this);">')",

复制代码

之前加入

1. <a href="%s" rel="lightbox">

复制代码

再找

1. onclick="if(!this.resized) {return true;} else {window.open(\'%s\');}"

复制代码

将上面语句删除(避免和href代码冲突!)

最后找

1. onmousewheel="return imgzoom(this);">

复制代码

在其后加入

1. </a>

复制代码

最后把压缩文件传送到根目录即可


完成

[ 本帖最后由 myavril 于 2006-7-4 19:38 编辑 ]

漂亮

顶一下支持

嘿嘿，马上去改~~！！！

在你之前已经用上，其实不用改得这么复杂。在header加上就可以，虽然偶尔会失效

非常好。。。
谢谢JJ

没这个rel="lightbox"
也可以么?我没试,直接按英文写的那么改
= =||

漂亮啊,不过大图就不好了

PL是PL
太复杂。

没看懂什么用。。。 自己发贴还要预览做什么呢？本地不能看？不懂。。。