UCHOME仿QQ相册上下图片效果，新增显示地址

以下代码可能存在不足，我第一次做插件有什么可以提出来共同研究。

如果你未能完成也可加我QQ寻求帮助。

觉的好您就用

不好也不要骂!

演示网站：

http://www.xingyang.cn

http://www.xingyang.cn/space-222-do-album-picid-110.html


template/default/common.css

打在在最后面加上

1. #divleft {
   
2. border:0px red solid;
   
3. position:absolute;
   
4. z-index:2007;
   
5. text-align:right;
   
6. padding-top:20px
   
7. padding-left:20px
   
8. }
   
9. #divright {
   
10. border:0px red solid;
    
11. position:absolute;
    
12. z-index:2007
    
13. text-align:center;
    
14. padding-top:20px
    
15. padding-left:20px
    
16. }
    
17. #tu{z-index:-2007;
    
18. }
    

复制代码

source/space_album.php

查找：

1. 
   
2. //图片不存在
   
3. if(empty($pic)) {
   
4.   showmessage('view_images_do_not_exist');
   
5. }
   

复制代码

在下面添加

1. //仿照腾讯QQ空间相册特效代码 by fgpgy QQ2866820 http://www.xingyang.cn
   
2.     //Start
   
3.     $query = $_SGLOBAL['db']->query("SELECT * FROM ".tname('pic')." WHERE albumid ='$pic[albumid]' AND
   
4.     uid='$space[uid]' order by picid desc");
   
5.         $listpicnum=$_SGLOBAL['db']->num_rows($query);
   
6.         $listpicnum1=$listpicnum+1;
   
7.         $k=1;
   
8.         while($listpic = $_SGLOBAL['db']->fetch_array($query))
   
9.         {
   
10.             $listpic['filepath']="pic_url_show[$k]='attachment/$listpic[filepath]'\n";
    
11.    $listpics[] = $listpic;
    
12.             $k++;
    
13.         }
    
14. 
    
15.     //End
    
16.     //仿腾讯QQ空间相册特效代码结束
    

复制代码

/template/default/space_album_pic.htm
查找:

1. 
   
2. <div class="photobox">
   
3.   <a href="space.php?uid=$pic[uid]&do=album&picid=$pic[picid]&goto=down"><img src="$pic[pic]" alt="$pic[title]" /></a>
   
4. </div>
   

复制代码

替换为：

1. 
   
2. <div class="photobox">
   
3. <div id="divall" >
   
4. <img src="$pic[pic]" id="tu" onmousemove="show_who(this,event)" onclick="click_who()">
   
5. </div>
   
6. <script>
   
7. document.write ("<div style='z-index:2007;visibility:hidden;border:2px solid #f66;background-color:#efefef;font-size:14px;position:absolute;Padding-bottom:4px;Padding-LEFT: 5px;Padding-right:5px;Padding-top:7px;left:-200px;top:180px;width:100px;bottom:1;text-align:center;' id=titlelayer></div>");              
   
8. var pic_url_show=new Array()
   
9. <!--{loop $listpics $key $value}-->
   
10. $value['filepath']
    
11. <!--{/loop}-->
    
12. var left0=50
    
13. var height0=50
    
14. var zhang=1
    
15. var evt_left,evt_top;
    
16. function show_who(o,evt){//alert(o.style.cursor.match("pre"))
    
17. evt = evt? evt: window.event;initX = evt.offsetX ? evt.offsetX : evt.layerX;
    
18. evt_left=o.clientWidth/2
    
19. evt_top=o.clientHeight/2
    
20. if(initX <= o.clientWidth/2  && zhang>1){if( o.style.cursor != "url(image/pre.ani),pointer")o.style.cursor = "url(image/pre.ani),pointer";if( o.title != "点击跳到上一张" ){o.title = "点击跳到上一张";}}
    
21. else if( o.style.cursor!="url(image/next.ani),pointer"&& zhang<(pic_url_show.length-1)){o.style.cursor="url(image/next.ani),pointer";if( o.title != "点击跳到下一张" ){o.title = "点击跳到下一张";}}
    
22. return;
    
23. }
    
24. function click_who(){
    
25. if (event.x<=evt_left){pre();}
    
26. else {next();}
    
27. }
    
28. function next(){
    
29. zhang++
    
30. if(zhang>=$listpicnum1){zhang=$listpicnum;alert_me("这是最后一张");document.getElementById("tu").title = ""}
    
31. document.getElementById("tu").src=pic_url_show[zhang]
    
32. }
    
33. function pre(){
    
34. zhang--
    
35. if(zhang<=0){zhang=1;alert_me("这是第一张");document.getElementById("tu").title = ""}
    
36. document.getElementById("tu").src=pic_url_show[zhang]
    
37. }
    
38. function alert_me(textis){
    
39. var obj_titlel=document.getElementById('titlelayer')
    
40. obj_titlel.innerHTML=textis
    
41. obj_titlel.style.visibility='visible';
    
42. obj_titlel.style.left=evt_left-50;
    
43. obj_titlel.style.top=evt_top;
    
44. setTimeout ("document.getElementById('titlelayer').style.visibility='hidden';document.getElementById('titlelayer').style.left=-200;",1500)
    
45. 
    
46. }
    
47. </script>
    
48. 
    
49. </div>
    

复制代码

将pre.ani next.ani上传到/image下面

注意：某些IIS不支持.ani后缀需修改

方法如下：
打开站点--HTTP头--MIME类型--新建--扩展名ani MIME类型ani确定即可！

完整包下载地址：

http://www.zhangerbao.cn/attachment.php?id=97

沙发站到！慢慢研究！

占位 研究中

偶也看看

ff下无效

占个位置先～看看

ff下无效
Rockoy 发表于 2008-11-10 01:54

FF  下没有测试 我完善下

占座！！！

！慢慢研究！

好好研究一下 谢谢楼主