相册js

1. .photopagelist{
2.     width:83px;
3.     border-width:20px 1px;
4.     border-color:#ccc;
5.     border-style:solid;
6. }
8. .prepage{
9.     width:83px;
10.     height:20px;
11.     *width:83px;
12.     border:1px solid #ccc;
13.     border-width:1px 0px;
14.     background-color:#ffffff;
15.     position:relative;
16.     z-index:2px;
17.     margin-top:-20px;
18.     cursor:pointer;
19.     background-image:url(../img/arrow_5.gif);
20.     background-position:  50% 50%;
21.     background-repeat:no-repeat;
22. }
23. .prepage:hover, .prepagehover{
24.     background-image:url(../img/arrow_6.gif);
25. }
26. .nextpage{
27.     width:83px;
28.     height:20px;
29.     *width:83px;
30.     border:1px solid #ccc;
31.     border-width:1px 0px;
32.     background-color:#ffffff;
33.     margin-bottom:-20px;
34.     position:relative;
35.     z-index:2px;
36.     display:block;
37.     cursor:pointer;
38.     background-image:url(../img/arrow_0.gif);
39.     background-position:  50% 50%;
40.     background-repeat:no-repeat;
41. }
42. .nextpage:hover, .nextpagehover{
43.     background-image:url(../img/arrow_7.gif);
44. }
45. .photopagelist li {
46.     width:78px;
47.     *width:76px;
48.     margin:1px;
49.     padding: 3px 1px;
50.     vertical-align:middle;
51.     line-height:auto;
52.     text-align:center;
53.     display: block;
54.     cursor:pointer;
55. }
56. .photopagelist li img {
57.     margin:0px;
58.     padding:0px;
59. }

1. 
   
2. 
   
3. <script language="javascript" type="text/javascript" >
4. var photoList = {"14942095c3d5c0":{"id":"5792367206716864","intro":"1680","ctime":"08-12-12 14:50","view":"16","comm":"0","photo":"http:www.1000lin.my//img//14942095c3d5c0_21.jpg"},"149420abe06b28":{"id":"5792367577688872","intro":"1680 (1)","ctime":"08-12-12 14:56","view":"19","comm":"0","photo":"http:www.1000lin.my//img//149420abe06b28_21.jpg"},"149420ace50850":{"id":"5792367594768464","intro":"1680 (2)","ctime":"08-12-12 14:56","view":"15","comm":"0","photo":"http:www.1000lin.my//img//149420ace50850_21.jpg"},"149420ae942658":{"id":"5792367623022168","intro":"1680 (3)","ctime":"08-12-12 14:57","view":"16","comm":"0","photo":"http:www.1000lin.my//img//149420ae942658_21.jpg"},"149420af8e1606":{"id":"5792367639401990","intro":"1680 (4)","ctime":"08-12-12 14:57","view":"55","comm":"0","photo":"http:www.1000lin.my//img//149420af8e1606_21.jpg"},"149420b1a518a0":{"id":"5792367674464416","intro":"1680 (5)","ctime":"08-12-12 14:58","view":"21","comm":"0","photo":"http:www.1000lin.my//img//149420b1a518a0_21.jpg"}};
5. var pospic = {'id':'','num':0, 'pn':{*$pn|default:0*}, 'total':{*$total|default:0*}};
6. var init_photoList = function(){
7.     if(photoList.length === 0) return false;
8.         $('.photopagelist ul').html('');
9.         $.each(photoList,function(i,_o){
10.             _html = '<li id="'+i+'"><img src='+_o['photo']+' onload="showImgSize(/'/',/'75x75/',this)" onclick="changImage(/''+i+'/')" /></li>';
11.             $(_html).appendTo('.photopagelist ul');
12.             photoList[i]['position'] = ++pospic.num;
13.         });  
14.         $('.photopagelist li img').mouseover(function(){
15.             $(this).css({opacity:"0.01"}).stop().animate({opacity:"1"},600);
16.         });
17.         
18. }
19. var changImage = function(_id){
20.         showImage(_id);//增加和替换Image
21.         pospic.id = _id;
22.         $('.selpicli').removeClass('selpicli');
23.         $('#'+_id,'.photopagelist').addClass('selpicli');
24.         if(obj_id != _id) changcomment(_id);
25.         photoList[_id]['_3'] = _img;
26. }
27. var changcomment = function(_id) {
28.     obj_id = _id;
29.     comm_ajax_page('{*$HOST*}comment.php?tab=' + tab + 'obj_id=' + obj_id + 'del_tag=yact=showpn=1');
30. }
31. var showImage =  function(_id){
32.         $('img[id^=photoview_]','#photoview').hide();
33.         $('#photoviewsrc').hide();
34.         _img = photoList[_id]['photo'].replace('_21','_23');
35.         
36.         _infor = "上传时间："+photoList[_id]['ctime']+" 浏览："+photoList[_id]['view']+"  评论："+photoList[_id]['comm'];
37.         $('#photoinfo').html(_infor);
38.         $('#photointro').html(photoList[_id]['intro']);
39.         
40.         if(photoList[_id]['_3'] != undefined) {
41.             $('#photoview_'+_id).show();
42.             return;
43.         }
44.         $('.loadingbar').show();
45.         if($.browser.msie){
46.                 $('.loadingbar').hide();
47.                 $('<img src="'+_img+'" id="photoview_'+_id+'" />').load(function(){showImgSize('','480x360',this);}).appendTo('#photoview');        
48.         } else {    
49.             $('<img src="'+_img+'" id="photoview_'+_id+'" />').load(function(){
50.                 $('.loadingbar').hide();
51.                 showImgSize('','480x360',this);
52.                 $(this).appendTo('#photoview');
53.             });
54.         }
55.         photoList[_id]['_3'] = _img;
56.         //更新点击数
57.         //$.getJSON("{*$HOST*}photo.php?action=photo_ajaxact=addviewid="+_id);
59. }
60. var changpage = function(_pn){
61.         $.getJSON("{*$HOST*}photo.php?action=photoshowuid={*$uid*}type=ajaxcate_id={*id_encode id=$cateinfo.fld_id*}pn="+_pn,function(_data){
62.             if(_data[0] == 1) {
63.                 photoList = _data[1];
64.                 init_photoList();
65.                 changImage($('.photopagelist li:first').attr('id'));
66.             }
67.         });
68. }
69. $().ready(function(){
70.     $('.photodiv table img').mousemove(function(){
71.         _id = $(this).attr('alt');
72.         _title="上传时间："+typeList[_id]['ctime']+"，专辑："+typeList[_id]['ctime']+"";
73.         $(this).attr('title',_title);
74.     }); 
75.     $('#selPhotoAlbum').change(function(){
76.         window.location.href='{*$HOST*}photo.php?action=photolist&uid={*$uid*}&cate_id='+$(this).val();
77.     });
78.     _r = init_photoList();
79.     if(_r === false){
80.         $('#photoListDiv,.content_link, .doact').hide();
81.         $('#content').append(' <div class="content_link" style="padding-top:35%" >用户还没有上传任何相片！</div>');
82.     }
83.     $('#goprepic').click(function(){
84.          
85.          if(photoList[pospic.id]['position'] > 1) {
86.             changImage($('#'+pospic.id).prev().attr('id'));
87.          } else {//翻上一页 最后一个
88.          
89.          }
90.     });
91.     $('#gonextpic').click(function(){
92.          if(photoList[pospic.id]['position'] < pospic.num) {
93.             changImage($('#'+pospic.id).next().attr('id'));
94.          } else {//翻下一页 第一个
95.             
96.          }
97.     });
98.     $('.prepage').hoverClass('prepagehover').click(function(){
99.         if(pospic['pn'] == 1) return;
100.         changpage(pospic['pn']-1);
101.         pospic['pn']--;
102.     });
103.     $('.nextpage').hoverClass('nextpagehover').click(function(){
104.         if(pospic['pn'] == pospic['total']) return;
105.         changpage(pospic['pn']+1);
106.         pospic['pn']++;
107.     });
108.     if(obj_id){ 
109.         changImage(obj_id);
110.     } else {
111.         changImage($('.photopagelist li:first').attr('id'));
112.     }
113. });
114. </script>
115. 
     
116.       <div style="display: block;" id="photoshow">
117.         <div style="width:490px;">
118.           <table cellpadding="0px" cellspacing="0px" border="0px" height="360px" width="480px" align="center"  >
119.             <tr>
120.               <td colspan="2" id="photoview"><img  src="/view/img/480x360.gif" id="photoviewsrc" /><img src="/view/img/loading.gif" id="loadingbar" class="loadingbar hide"> </td>
121.             </tr>
122.             <tr>
123.               <td colspan="2" id="photoinfo"></td>
124.             </tr>
125.             <tr>
126.               <td colspan="2" id="photostate"></td>
127.             </tr>
128.             <tr>
129.               <td colspan="2" id="photointro"></td>
130.             </tr>
131.           </table>
132.         </div>
133.       </div>
134.       <div class="photopagelist right">
135.         <div class="prepage"> </div>
136.         <ul>
137.         </ul>
138.         <div class="nextpage"> </div>
139.       </div>
140.     </div>
141.  </div>