万能相册编辑插件开发完毕-模板代码下载

admin

终于，在休息了几天之后，对相册编辑功能进行了开发，已经写完了，下面是完整代码。
使用方法：
1.创建文件空的spacecp_album.txt，然后将以下代码复制粘贴，保存之后，修改后缀为htm，即：spacecp_album.htm，如果您使用的模板是php后缀的，改成php即可；
2.mobeli和touch版都是直接替换：网站根目录/template/模板目录/home/spacecp_album.htm
预览图：



单页插件代码如下：

1. <style type="text/css">
   
2. #bq{   /*head自定义背景框*/
   
3.     width:97%;
   
4.     height:45px;
   
5.     background-color:#EE3B3B;
   
6.     border-radius:5px;
   
7.     position: absolute;
   
8.     left:6px;
   
9.     top:2px;
   
10.     text-align:center;
    
11. }
    
12. #h2{   /*自定义head标题*/
    
13.     color:#fff;
    
14.     line-height:48px;
    
15.     font-size:20px;
    
16.     text-decoration:none;   
    
17. }
    
18. #a_l{   /*返回按钮*/
    
19.     position: absolute;
    
20.     left:12px;
    
21.     font-size:18px;
    
22.     text-decoration:none;   
    
23. }
    
24. #a_r{   /*上传按钮*/
    
25.     position: absolute;
    
26.     right:12px;
    
27.     font-size:18px;
    
28.     color:#fff;
    
29.     text-decoration:none;   
    
30. }
    
31. .kuang{   /*顶层通用框体*/
    
32.     border-radius:5px;
    
33.     border:2px solid #FFBF00;   
    
34.     width:96%;
    
35.     font-size:16px;
    
36.     color:#0080FF;
    
37.     margin:0 auto;
    
38.     margin-top:10px;
    
39. }
    
40. .up_kuang{   /*第一个菜单列表子框*/
    
41.     border:3px inset #fff013;
    
42.     border-radius:5px;
    
43.     width:auto;
    
44.     height:60;
    
45.     background-color:#FFD700;
    
46.     margin:2px 2px 2px 2px;
    
47. }
    
48. .ul{
    
49.     line-height:60px;
    
50.     text-align: center;
    
51. }
    
52. .li_lib_b {   /*第一个主菜单*/
    
53.     list-style:none;
    
54.     float:left;
    
55.     width:25%;
    
56. }
    
57. .li_lib_a {   /*图片编辑提示语*/
    
58.     text-align: center;
    
59.     color:#836FFF;
    
60. }
    
61. .up_kuang2{   /*图片编辑第三个框体*/
    
62.     border-radius:4px;
    
63.     overflow-x:auto;
    
64.     width:auto;
    
65.     background-color:#C6E2FF;
    
66.     padding:10px 10px 10px 10px;
    
67. }
    
68. .ms_kuang{/*图片描述框体*/
    
69.     width:98%;
    
70.     height:80px;
    
71.     line-height:40px;
    
72.     border-radius:5px;
    
73. }
    
74. .td_t1{  /*表结构td元素*/
    
75.     width:10%;
    
76.     text-align: center;
    
77. }
    
78. .td_t2{  /*表结构td元素*/
    
79.     width:20%;
    
80.     text-align: center;   
    
81. }
    
82. .td_t3{  /*表结构td元素*/
    
83.     width:30%;
    
84.     text-align: center;   
    
85. }
    
86. .td_t4{  /*表结构td元素*/
    
87.     width:40%;
    
88.     text-align: center;   
    
89. }
    
90. .td_img{  /*表结构图片样式*/
    
91.     border:3px inset #fff;
    
92.     margin:5px 5px 5px 10px;
    
93.     border-radius:5px;   
    
94. }
    
95. .td_box{ /*表结构盒子*/
    
96.     height:30px;
    
97.     background-color:#EE3B3B;
    
98.     border-radius:5px;
    
99. }
    
100. .th_cd{ /*相册编辑-表结构td元素*/
     
101.     width:28%;
     
102.     height:40px;
     
103.     padding-left:10px;
     
104. 
     
105. }
     
106. .td_cd{ /*相册编辑-表结构td元素*/
     
107.     border:3px inset #FFBF00;
     
108.     border-radius:5px;
     
109.     width:97.5%;
     
110.     height:30px;
     
111.     background:#BEF781;
     
112.     outline:none;
     
113.     font-size:18px;
     
114.     color:#FF0040;
     
115.     text-align:center;
     
116.     margin-left:3px;
     
117. }  
     
118. .td3_cd{ /*相册编辑-表结构td元素*/
     
119.     border:3px inset #FFBF00;
     
120.     margin:3px 3px 3px 3px;
     
121.     border-radius:5px;
     
122.     width:97.5%;
     
123.     height:35px;
     
124.     background:#BEF781;
     
125.     outline:none;
     
126.     font-size:18px;
     
127.     color:#FA5882;
     
128. }  
     
129. #red{    /*查看相册 菜单颜色*/
     
130.     color:#EE30A7;
     
131.     background-color:#fff;
     
132.     border-radius:5px;
     
133.     padding:5px 5px 3px 5px;   
     
134.     font-size:14px;
     
135.     border:3px inset #fff013;   
     
136. }
     
137. #blue{   /*编辑相册 菜单颜色*/
     
138.     color:#1E90FF;
     
139.     background-color:#fff;
     
140.     border-radius:5px;   
     
141.     padding:5px 5px 3px 5px;   
     
142.     font-size:14px;   
     
143.     border:3px inset #fff013;   
     
144. }
     
145. #green{   /*相册列表 菜单颜色*/
     
146.     color:#43CD80;
     
147.     background-color:#fff;   
     
148.     border-radius:5px;   
     
149.     padding:5px 5px 3px 5px;   
     
150.     font-size:14px;   
     
151.     border:3px inset #fff013;   
     
152. }
     
153. #purple{  /*编辑图片 菜单颜色*/
     
154.     color:#836FFF;
     
155.     background-color:#fff;   
     
156.     border-radius:5px;   
     
157.     padding:5px 5px 3px 5px;   
     
158.     font-size:14px;   
     
159.     border:3px inset #fff013;   
     
160. }
     
161. .fm_btn{   /*编辑和上传按钮样式*/
     
162.     padding:4px 3px 2px 6px;
     
163.     background-color:#1E90FF;
     
164.     margin:5px 15px 5px 15px;
     
165.     color:#fff;
     
166.     border-radius:5px;
     
167.     border:2px inset #1E90FF;   
     
168. }
     
169. .fm_btn1{   /*编辑和上传按钮样式*/
     
170.     padding:4px 4px 0px 4px;
     
171.     background-color:#1E90FF;
     
172.     color:#fff;
     
173.     border-radius:5px;
     
174.     border:2px inset #1E90FF;   
     
175. }
     
176. .fm_btn2{   /*编辑和上传按钮样式*/
     
177.     line-height:30px;
     
178.     padding:4px 4px 0px 4px;
     
179.     height:30px;
     
180.     background-color:#fff;
     
181.     color:black;
     
182.     border-radius:5px;
     
183.     border:2px inset #1E90FF;   
     
184. }
     
185. .b_btn2{   /*确认修改按钮*/
     
186.     padding:2px 4px 2px 4px;
     
187.     background-color:#1E90FF;
     
188.     margin:0px 2px 0px 2px;
     
189.     color:#fff;
     
190.     border-radius:5px;
     
191.     border:2px inset #1E90FF;  
     
192.     font-size:12px;
     
193. }
     
194. .b_btn3{   /*删除相册按钮*/
     
195.     padding:4px 4px 4px 4px;
     
196.     background-color:#1E90FF;
     
197.     margin:0px 2px 0px 2px;
     
198.     color:#fff;
     
199.     border-radius:5px;
     
200.     border:2px inset #1E90FF;  
     
201.     font-size:12px;
     
202.     font-weight: bold;
     
203. }
     
204.    
     
205. }
     
206. </style>
     
207. <!--{eval $_G[home_tpl_titles] = array($album[albumname], '{lang album}');}-->
     
208. 
     
209. <!--{template common/header}-->
     
210. <!--{if $_GET['op'] == 'edit'}-->
     
211. 
     
212. <!--第一分页：编辑相册 -->
     
213. <!--独立head-->
     
214. <header>
     
215. <div id="bq">
     
216.             <center>
     
217.                 <!--{if $space[uid]==$_G[uid]}-->
     
218.                 <h2 id="h2">编辑相册
     
219.                 <!--{/if}-->
     
220.                     <span id="a_l" onClick="javascript :history.back(-1);">返回</span>
     
221.                     <a href="home.php?mod=space&do=album&view=me" id="a_r">我的相册</a>
     
222.                 </h2>
     
223.             </center>   
     
224. </div>
     
225. </header>
     
226. <!--第一分页：头部菜单 -->
     
227.         <div  class="kuang">
     
228.                 <div class="up_kuang">
     
229.                         <ul class="ul">
     
230.                                 <!--{eval $aid = $albumid ? $albumid : -1;}-->
     
231.                                 <li class="li_lib_b"><a id="red" href="home.php?mod=space&uid=$album[uid]&do=album&id=$aid">查看相册</a></li>
     
232.                                 <li  class="li_lib_b" {if $_GET['op']=='edit'} class="a"{/if}><a id="blue" href="home.php?mod=spacecp&ac=album&op=edit&albumid=$albumid">编辑相册</a></li>
     
233.                                 <li  class="li_lib_b" {if $_GET['op']=='editpic'} class="a"{/if}><a id="purple" href="home.php?mod=spacecp&ac=album&op=editpic&albumid=$albumid">编辑图片</a></li>
     
234.                                 <li  class="li_lib_b" ><a id="green" href="home.php?mod=space&uid=$album[uid]&do=album&view=me">相册列表</a></li>
     
235.                         </ul>
     
236.                         </div>
     
237.                 </div>
     
238. 
     
239. <!--第一分页：相册编辑功能区 -->
     
240. <div class="kuang">
     
241.     <div class="up_kuang2">
     
242.                         <form method="post" autocomplete="off" id="theform" name="theform" action="home.php?mod=spacecp&ac=album&op=edit&albumid=$albumid">
     
243.                                 <table>
     
244.                                         <tr class="tr_cd">
     
245.                                                 <th class="th_cd"><label for="albumname">相册名称</label></th>
     
246.                                                
     
247.                                                 <td  class="td_box_cd"><input type="text" id="albumname" name="albumname" value="$album[albumname]" size="20" class="td_cd" /></td>
     
248.                                         </tr>
     
249.                
     
250.                                         <tr>
     
251.                                                 <th class="th_cd"><label for="depict">相册描述</label></th>
     
252.                                                 <td class="td_box_cd"><input name="depict" id="depict" class="td_cd" cols="40" rows="3" value="$album[depict]" /></td>
     
253.                                         </tr>
     
254.                                         <!--{if $categoryselect}-->
     
255.                                         <tr>
     
256.                                                 <th class="th_cd">社区分类</th>
     
257.                                                 <td class="td_box_cd">
     
258.                                                           $categoryselect
     
259.                                                 </td>
     
260.                                         </tr>
     
261.                                         <!--{/if}-->
     
262.                                         <tr>
     
263.                                                 <th class="th_cd">隐私设置</th>
     
264.                                                 <td class="td_box_cd">
     
265.                                                         <select name="friend" onchange="passwordShow(this.value);" class="td3_cd">
     
266.                                                                 <option value="0"$friendarr[0]>所有人可见</option>
     
267.                                                                 <option value="1"$friendarr[1]>仅好友可见</option>
     
268.                                                                 <option value="2"$friendarr[2]>仅指定可见</option>
     
269.                                                                 <option value="3"$friendarr[3]>仅自己可见</option>
     
270.                                                                 <option value="4"$friendarr[4]>输密码可见</option>
     
271.                                                         </select>
     
272.                                                 </td>
     
273.                                         </tr>
     
274.                                         <tbody id="span_password" style="$passwordstyle">
     
275.                                                 <tr>
     
276.                                                         <th class="th_cd">访问密码</th>
     
277.                                                         <td  class="td_box_cd"><input type="text" name="password" id="uploadpassword" value="$album[password]" size="10" class="td_cd" /></td>
     
278.                                                 </tr>
     
279.                                         </tbody>
     
280.                                         <tbody id="tb_selectgroup" style="$selectgroupstyle">
     
281.                                      <tr>
     
282.                                                         <th class="th_cd">好友昵称</th>
     
283.                                                         <td class="td_box_cd">
     
284.                                                                 <input name="target_names" id="target_names" rows="3"  class="td_cd" value="$album[target_names]" />
     
285. 
     
286.                                                         </td>       
     
287.                                         </tr>
     
288.                                                 <tr>
     
289.                                         </tbody>
     
290.                                         <tr>
     
291.                                                 <th  class="th_cd">提交保存</th>
     
292.                                                 <td>
     
293.                                                         <input type="hidden" name="referer" value="{echo dreferer()}" />
     
294.                                                         <input type="hidden" name="editsubmit" value="true" />
     
295.                                                         <button name="submit" type="submit"  class="b_btn2" value="true"><strong>确认修改</strong></button>
     
296.                                                 </td>
     
297.                                         </tr>
     
298.                                         <tr>
     
299.                                                 <th class="th_cd">其它操作</th>
     
300.                                                 <td><a  class="b_btn3" style="color:#fff;" id="album_delete_$album[albumid]" href="home.php?mod=spacecp&ac=album&op=delete&albumid=$album[albumid]&handlekey=delalbumhk_{$album[albumid]}">删除相册</a></td>
     
301.                                         </tr>
     
302.                                 </table>
     
303.                                 <input type="hidden" name="formhash" value="{FORMHASH}" />
     
304.                         </form>
     
305.     </div>
     
306. </div>
     
307. <!--第一分页：相册编辑JS部分 -->
     
308.             <script type="text/javascript">
     
309.                                  function passwordShow(value) {
     
310.                                         if(value==4) {
     
311.                                                 document.getElementById('span_password').style.display = '';
     
312.                                                 document.getElementById('tb_selectgroup').style.display = 'none';
     
313.                                         } else if(value==2) {
     
314.                                                 document.getElementById('span_password').style.display = 'none';
     
315.                                                 document.getElementById('tb_selectgroup').style.display = '';
     
316.                                         } else {
     
317.                                                 document.getElementById('span_password').style.display = 'none';
     
318.                                                 document.getElementById('tb_selectgroup').style.display = 'none';
     
319.                                         }
     
320.                                 }
     
321.                                 function getgroup(gid) {
     
322.                                         if(gid) {
     
323.                                                 $.ajax({
     
324.                                                 type:'GET',
     
325.                                                 url:'home.php?mod=spacecp&ac=privacy&inajax=1&op=getgroup&gid='+gid,
     
326.                                                 dataType:'xml'
     
327.                                                 })
     
328.                                                 .success(function(s) {
     
329.                                                         v = $(s.lastChild.firstChild.nodeValue).find('.show_message').html();
     
330.                                                         v = v + ' ';
     
331.                                                         document.getElementById('target_names').innerHTML += v;
     
332.                                                 });
     
333.                                         }
     
334.                                 }
     
335.                                
     
336.                                 $('#editsubmit').on('click', function() {
     
337.                                         var obj = $(this);
     
338.                                         var form = $(this.form);
     
339.                                         popup.open('<img src="' + IMGDIR + '/imageloading.gif">');
     
340.                                          
     
341.                                         $.ajax({
     
342.                                                 type:'POST',
     
343.                                                 url:form.attr('action') +'&inajax=1',
     
344.                                                 data:form.serialize(),
     
345.                                                 dataType:'xml'
     
346.                                         })
     
347.                                         .success(function(s) {
     
348.                                                 popup.open(s.lastChild.firstChild.nodeValue);
     
349.                                                 window.location.href = 'home.php?mod=space&uid=$album[uid]&do=album&id=$albumid';
     
350.                                         })
     
351.                                         .error(function() {
     
352.                                                 popup.open('{lang networkerror}', 'wic_alert');
     
353.                                         });
     
354.                                         return false;
     
355.                                                        
     
356.                                                        
     
357.                                 });
     
358.                         </script>
     
359. 
     
360. <!--第二分页：图片编辑 -->
     
361. 
     
362. <!--{elseif $_GET['op'] == 'editpic'}-->
     
363. <!--第二分页：图片编辑-head -->
     
364. <header>
     
365. <div id="bq">
     
366.             <center>
     
367.                 <!--{if $space[uid]==$_G[uid]}-->
     
368.                 <h2 id="h2">编辑图片
     
369.                 <!--{/if}-->
     
370.                     <span id="a_l" onClick="javascript :history.back(-1);">返回</span>
     
371.                     <a href="home.php?mod=space&do=album&view=me" id="a_r">我的相册</a>
     
372.                 </h2>
     
373.             </center>   
     
374. </div>
     
375. </header>
     
376. <!--第二分页：图片编辑-头部菜单 -->
     
377.         <div  class="kuang">
     
378.                 <div class="up_kuang">
     
379. 
     
380.                         <ul class="ul">
     
381.                                 <!--{eval $aid = $albumid ? $albumid : -1;}-->
     
382.                                 <li class="li_lib_b"><a id="red" href="home.php?mod=space&uid=$album[uid]&do=album&id=$aid">查看相册</a></li>
     
383.                                 <li  class="li_lib_b" {if $_GET['op']=='edit'} class="a"{/if}><a id="blue" href="home.php?mod=spacecp&ac=album&op=edit&albumid=$albumid">编辑相册</a></li>
     
384.                                 <li  class="li_lib_b" {if $_GET['op']=='editpic'} class="a"{/if}><a id="purple" href="home.php?mod=spacecp&ac=album&op=editpic&albumid=$albumid">编辑图片</a></li>
     
385.                                 <li  class="li_lib_b" ><a id="green" href="home.php?mod=space&uid=$album[uid]&do=album&view=me">相册列表</a></li>
     
386.                         </ul>
     
387.                         </div>
     
388.                 </div>
     
389.                
     
390. <!--第二分页：图片编辑-提示信息 -->               
     
391. <div class="kuang">
     
392.     <div class="up_kuang2">               
     
393.                     <div class="li_lib_a">[温馨提示]封面图的更新不会立即生效</div>
     
394.     </div>
     
395. </div>
     
396. <!--第二分页：图片编辑-功能区 -->       
     
397. <div class="kuang">
     
398.     <div class="up_kuang2">
     
399.                 <!--{if $list}-->
     
400.                         <form method="post" autocomplete="off" id="theform" name="theform" action="home.php?mod=spacecp&ac=album&op=editpic&albumid=$albumid">
     
401.                     <table>
     
402.                         <th class="td_t1">
     
403.                         选择
     
404.                         </th>
     
405.                         <td class="td_t2">
     
406.                         图片
     
407.                         </td>
     
408.                         <td class="td_t3">
     
409.                         操作
     
410.                         </td>
     
411.                         <td class="td_t4">   
     
412.                         描述                        
     
413.                         </td>
     
414.                     </table>   
     
415.                 <!--{eval $common = '';}-->
     
416.                 <!--{loop $list $value}-->               
     
417.                 <li class="li_lib2">
     
418.                         <table>                        
     
419.                         <th class="th">
     
420.                         <input type="checkbox" name="ids[{$value[picid]}]" value="{$value[picid]}" {$value[checked]}>
     
421.                         </th>
     
422.                         <td  class="td1">
     
423.                         <a href="$value[bigpic]" target="_blank"><img src="$value[pic]" alt="" width="80" class="td_img" /></a>
     
424.                         </td>
     
425.                         <td class="td2">
     
426.                         <!--{eval $ids .= $common.$value['picid'].':'.$value['picid'];}-->
     
427.                         <!--{eval $common = ',';}-->
     
428.                         <!--{if $album[albumname]}-->
     
429.                         <a href="home.php?mod=spacecp&ac=album&op=setpic&albumid=$value[albumid]&picid=$value[picid]&handlekey=setpichk" id="a_picid_$value[picid]" class="dialog fm_btn" style="color:#fff;font-size:14px;display:block;width:16px;height:82px;">设为封面</a>
     
430.                         <!--{/if}-->
     
431.                         </td>
     
432.                           
     
433.                         <td class="td3">                           
     
434.                         <textarea name="title[{$value[picid]}]" rows="4" cols="70" class="ms_kuang">$value[title] </textarea>
     
435.                         <input type="hidden" name="oldtitle[{$value[picid]}]" value="$value[title]" >
     
436.                         </td>
     
437.                     </table>
     
438.                 </li>
     
439.                 <!--{/loop}-->
     
440.                 <div class="up_kuang2">       
     
441.                 <li  class="li_lib2">
     
442.                 <th class="th1">
     
443.                 <label for="chkall" onclick="checkAll(this.form, 'ids')"><input type="checkbox" name="chkall" id="chkall"  /></label>
     
444.                 </th>
     
445.                 <td  class="td">               
     
446.                 <button type="submit" name="editpicsubmit" value="true" class="fm_btn1" onclick="this.form.action+='&subop=update';"><strong>更新描述</strong></button>
     
447.                 </td>
     
448.                 <button type="submit" name="editpicsubmit" value="true" class="fm_btn1" onclick="this.form.action+='&subop=delete';return ischeck('theform', 'ids')"><strong>删除</strong></button>
     
449. 
     
450.                 <!--{if $albumlist}-->
     
451.                 <button type="submit" name="editpicsubmit" value="true" class="fm_btn1" onclick="this.form.action+='&subop=move';return ischeck('theform', 'ids')"><strong>移动到</strong></button>
     
452.                 <select name="newalbumid" class="fm_btn2">
     
453.                 <!--{loop $albumlist $key $value}-->
     
454.                 <!--{if $albumid != $value[albumid]}--><option value="$value[albumid]">$value[albumname]</option><!--{/if}-->
     
455.                 <!--{/loop}-->
     
456.                 <!--{if $albumid>0}--><option value="0">默认相册</option><!--{/if}-->
     
457.                 </select>
     
458.                 <!--{/if}-->
     
459.                                 </li>
     
460.                                 <input type="hidden" name="page" value="$page" />
     
461.                                 <input type="hidden" name="editpicsubmit" value="true" />
     
462.                                 <input type="hidden" name="formhash" value="{FORMHASH}" />
     
463.                                 </div>
     
464.                         </form>
     
465. <!--第二分页：图片编辑-如果没有图片提示 -->                               
     
466.                    <div class="up_kuang2">       
     
467.                         <!--{if $multi}-->
     
468.                         <div>$multi</div>
     
469.                         <!--{/if}-->
     
470.                         </div>
     
471.                        
     
472. <!--第二分页：图片编辑-JS部分 -->                               
     
473.                         <script type="text/javascript">
     
474.                                 function checkAll(form, name) {
     
475.                                         for(var i = 0; i < form.elements.length; i++) {
     
476.                                                 var e = form.elements[i];
     
477.                                                 if(e.name.match(name)) {
     
478.                                                         e.checked = form.elements['chkall'].checked;
     
479.                                                 }
     
480.                                         }
     
481.                                 }
     
482.                                 function ischeck(id, prefix) {
     
483.                                         form = document.getElementById(id);
     
484.                                         for(var i = 0; i < form.elements.length; i++) {
     
485.                                                 var e = form.elements[i];
     
486.                                                 if(e.name.match(prefix) && e.checked) {
     
487.                                                         if(confirm("您确定要执行本操作吗？")) {
     
488.                                                                 return true;
     
489.                                                         } else {
     
490.                                                                 return false;
     
491.                                                         }
     
492.                                                 }
     
493.                                         }
     
494.                                         popup.open('请选择要操作的对象','wic_alert');
     
495.                                         return false;
     
496.                                 }
     
497.                                 var picObj = {{$ids}};
     
498.                                 function succeedhandle_setpichk(url, msg, values) {
     
499.                                         for(var id in picObj) {
     
500.                                                 document.getElementById('a_picid_' + picObj[id]).innerHTML = "{lang set_to_conver}";
     
501.                                         }
     
502.                                         if(values['picid']) {
     
503.                                                 document.getElementById('a_picid_' + values['picid']).innerHTML = "{lang cover_pic}";
     
504.                                         }
     
505.                                 }
     
506.                         </script>
     
507.                 <!--{else}-->
     
508.                    <div class="up_kuang2">                       
     
509.                         <div>抱歉！相册是空的！</div>
     
510.                    </div>       
     
511.                 <!--{/if}-->
     
512. 
     
513. </div>
     
514. </div>
     
515. <!--第二分页：图片编辑-删除操作的提示 -->       
     
516. <div class="kuang">
     
517.     <div class="up_kuang2">
     
518.                     <text>删除提示：<p>如果删除的图片存在于帖子、博客文章中，删除之后将无法正常显示。</text>
     
519.     </div>
     
520. </div>
     
521. 
     
522. <!--{/if}-->
     
523. 
     
524. <!--{template common/footer}-->

复制代码