教你将uchome日志里的点击图片做成论坛的效果

本来是打算用论坛里原来的函数zoom(this,this,src)，但是发现有错误，JavaScript懂的不多，不知道从哪里修改。希望高人帮忙解决下。

原理：利用lightbox实现点击图片弹出的效果
lightbox下载地址：http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.04.zip

方法：

首先点击上面的链接下载lightbox文件   解压后将images、js、css三个文件夹上传到uchome根目录


然后找到source下的script_upload.js文件   找到下面这个函数

1. function insertAttachimgTag(id) {
   
2.         if(insertType == 0) {
   
3.                 insertImage(id);
   
4.         } else if(is_ie) {
   
5.                 edit_insert('<img id="_uchome_localimg_' + id + '" src="' + $('attach_' + id).value + '">');
   
6.         } else {
   
7.                 alert('对不起，请在IE浏览器下面使用本功能');
   
8.         }
   
9. }

复制代码

将其中的

1. edit_insert('<img id="_uchome_localimg_' + id + '" src="' + $('attach_' + id).value + '">');

复制代码

改为

1. edit_insert('<a href="' + $('attach_' + id).value + '" rel="lightbox"><img id="_uchome_localimg_' + id + '" src="' + $('attach_' + id).value + '"></a>');

复制代码

找到template文件夹下的space_blog_view.htm文件（之前粗心写成cp_blog.htm文件，请添加到cp_blog.htm文件里的网友删除添加的代码）
找到下面这段代码

1. <!--{template header}-->

复制代码

在其下面添加上以下的代码

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

复制代码

修改完成后记得保存。如有不明白的可以短消息我，或者加QQ303708252联系。

上张效果截图



特别说明：此效果只对本地上传的图片有效！
对于相册插入和网络图片的支持正在分析修改中，完成会放出来给大家分享。

AD以下：城市窝 http:www.city-wo.com

没有人需要吗。。？

好东西啊!!!

回复 3# dbo123


    终于有人回复了啊。。   

感谢楼主分享

好象不能用吧...我试了一下，发现不成功.....

修改了 无效，郁闷ING。。。。。。。。。。。。。

回复 6# kuaigou8


   不会吧。  我本地测试通过的。     你发下地址

回复 7# dbo123


    给个地址看看

回复 6# kuaigou8


    刚检查了下，

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

复制代码

上面这段代码应该是添加到space_blog_view.htm文件的

1. <!--{template header}-->

复制代码

后面

实在是太粗心了。。  抱歉