2020-06-06

DiscuzⅩ3.4万能相册编辑插件

2020-06-06插图
2020-06-06插图(1)
2020-06-06插图(2)

<!--
作者:青花
时间:20200606日
转载请注明:https://wdc.store
终于,在休息了几天之后,对相册编辑功能进行了开发,已经写完了,下面是完整代码。使用方法:
1.创建文件空的spacecp_album.txt,然后将以下代码复制粘贴,保存之后,修改后缀为htm,即:spacecp_album.htm,如果您使用的模板是php后缀的,改成php即可;
2.mobeli和touch版都是直接替换:网站根目录/template/模板目录/home/spacecp_album.htm预览图:单页插件代码如下:
-->
<style type="text/css"> 
#bq{   /*head自定义背景框*/    
    width:97%;    
    height:45px;    
    background-color:#EE3B3B;
    border-radius:5px;    
    position: absolute;    
    left:6px;    
    top:2px;    
    text-align:center;
    }
#h2{   /*自定义head标题*/
    color:#fff;
    line-height:48px;
    font-size:20px;    
    text-decoration:none;    
    }
#a_l{   /*返回按钮*/    
    position: absolute;
    left:12px;    
    font-size:18px;    
    text-decoration:none;    
    }
#a_r{   /*上传按钮*/    
    position: absolute;    
    right:12px;    
    font-size:18px;    
    color:#fff;    
    text-decoration:none;    
    }
.kuang{   /*顶层通用框体*/    
    border-radius:5px;    
    border:2px solid #FFBF00;       
    width:96%;    
    font-size:16px;    
    color:#0080FF;    
    margin:0 auto;    
    margin-top:10px; 
    }
.up_kuang{   /*第一个菜单列表子框*/    
    border:3px inset #fff013;    
    border-radius:5px;    
    width:auto;    
    height:60;    
    background-color:#FFD700;    
    margin:2px 2px 2px 2px;}
.ul{    
   line-height:60px;    
   text-align: center;
   }
.li_lib_b {   /*第一个主菜单*/    
    list-style:none;    
    float:left;    
    width:25%;
}
.li_lib_a {   /*图片编辑提示语*/    
    text-align: center;            
    color:#836FFF;
    }
.up_kuang2{   /*图片编辑第三个框体*/    
    border-radius:4px;    
    overflow-x:auto;    
    width:auto;    
    background-color:#C6E2FF;    
    padding:10px 10px 10px 10px;
    }
.ms_kuang{/*图片描述框体*/    
    width:98%;    
    height:80px;    
    line-height:40px;    
    border-radius:5px;
    }
.td_t1{  /*表结构td元素*/    
    width:10%;    
    text-align: center;
    }
.td_t2{  /*表结构td元素*/    
    width:20%;    
    text-align: center;    
    }
.td_t3{  /*表结构td元素*/    
    width:30%;    
    text-align: center;    
    }
.td_t4{  /*表结构td元素*/    
    width:40%;   
    text-align: center;    
    }
.td_img{  /*表结构图片样式*/    
    border:3px inset #fff;    
    margin:5px 5px 5px 10px;    
    border-radius:5px;    
    }
.td_box{ /*表结构盒子*/    
    height:30px;    
    background-color:#EE3B3B;    
    border-radius:5px;
    }
.th_cd{ /*相册编辑-表结构td元素*/    
    width:28%;    
    height:40px;    
    padding-left:10px;
    }
.td_cd{ /*相册编辑-表结构td元素*/    
    border:3px inset #FFBF00;    
    border-radius:5px;    
    width:97.5%;    
    height:30px;    
    background:#BEF781;    
    outline:none;    
    font-size:18px;    
    color:#FF0040;    
    text-align:center;    
    margin-left:3px;
    }  
.td3_cd{ /*相册编辑-表结构td元素*/    
    border:3px inset #FFBF00;    
    margin:3px 3px 3px 3px;    
    border-radius:5px;    
    width:97.5%;    
    height:35px;    
    background:#BEF781;    
    outline:none;    
    font-size:18px;    
    color:#FA5882;
    }  
#red{    /*查看相册 菜单颜色*/     
    color:#EE30A7;    
    background-color:#fff;    
    border-radius:5px;     
    padding:5px 5px 3px 5px;       
    font-size:14px;    
    border:3px inset #fff013;    
    }
#blue{   /*编辑相册 菜单颜色*/    
    color:#1E90FF;    
    background-color:#fff;    
    border-radius:5px;       
    padding:5px 5px 3px 5px;       
    font-size:14px;        
    border:3px inset #fff013;    
    }
#green{   /*相册列表 菜单颜色*/
    color:#43CD80;    
    background-color:#fff;       
    border-radius:5px;       
    padding:5px 5px 3px 5px;       
    font-size:14px;        
    border:3px inset #fff013;    
    }
#purple{  /*编辑图片 菜单颜色*/
    color:#836FFF;    
    background-color:#fff;        
    border-radius:5px;        
    padding:5px 5px 3px 5px;        
    font-size:14px;       
    border:3px inset #fff013;    
    }
.fm_btn{   /*编辑和上传按钮样式*/     
    padding:4px 3px 2px 6px;    
    background-color:#1E90FF;    
    margin:5px 15px 5px 15px;    
    color:#fff;    
    border-radius:5px;    
    border:2px inset #1E90FF;   
    }
.fm_btn1{   /*编辑和上传按钮样式*/     
    padding:4px 4px 0px 4px;    
    background-color:#1E90FF;    
    color:#fff;    
    border-radius:5px;    
    border:2px inset #1E90FF;   
    }
.fm_btn2{   /*编辑和上传按钮样式*/
    line-height:30px;    
    padding:4px 4px 0px 4px;    
    height:30px;    
    background-color:#fff;    
    color:black;    
    border-radius:5px;    
    border:2px inset #1E90FF;   
    }
.b_btn2{   /*确认修改按钮*/     
    padding:2px 4px 2px 4px;    
    background-color:#1E90FF;    
    margin:0px 2px 0px 2px;    
    color:#fff;    
    border-radius:5px;    
    border:2px inset #1E90FF;      
    font-size:12px;
    }
.b_btn3{   /*删除相册按钮*/     
    padding:4px 4px 4px 4px;    
    background-color:#1E90FF;    
    margin:0px 2px 0px 2px;    
    color:#fff;    
    border-radius:5px;    
    border:2px inset #1E90FF;      
    font-size:12px;    
    font-weight: bold;
    }    
</style>
<!--{eval $_G[home_tpl_titles] = array($album[albumname], '{lang album}');}-->
<!--{template common/header}-->
<!--{if $_GET['op'] == 'edit'}-->
<!--第一分页:编辑相册 -->
<!--独立head-->
<header>
<div id="bq">            
    <center>                 
<!--{if $space[uid]==$_G[uid]}-->                               
<h2 id="h2">编辑相册                
<!--{/if}-->                     
<span id="a_l" onClick="javascript :history.back(-1);">返回</span>                    <a href="home.php?mod=space&do=album&view=me" id="a_r">我的相册</a>                
</h2>             
</center>    
</div> </header>
<!--第一分页:头部菜单 -->        
<div  class="kuang">                
<div class="up_kuang">                       
 <ul class="ul">                                <!--{eval $aid = $albumid ? $albumid : -1;}-->
<li clli_lib_b"><a id="red" href="home.php?mod=space&uid=$album[uid]&do=album&id=$aid">查看相册</a></li>                                
<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>                                
<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>                                <li  class="li_lib_b" ><a id="green" href="home.php?mod=space&uid=$album[uid]&do=album&view=me">相册列表</a></li>                        
</ul>                        
</div>                
</div>
<!--第一分页:相册编辑功能区 -->
<div class="kuang">
    <div class="up_kuang2">                        <form method="post" autocomplete="off" id="theform" name="theform" action="home.php?mod=spacecp&ac=album&op=edit&albumid=$albumid">                                <table>                                        <tr class="tr_cd">                                                <th class="th_cd">
    <label for="albumname">相册名称</label>
    </th>                                                                                                <td  class="td_box_cd"><input type="text" id="albumname" name="albumname" value="$album[albumname]" size="20" class="td_cd" /></td>                                        </tr>                                                        <tr>                                                <th class="th_cd">
    <label for="depict">相册描述</label>
    </th>                                                <td class="td_box_cd">
    <input name="depict" id="depict" class="td_cd" cols="40" rows="3" value="$album[depict]" />
    </td>                                        </tr>                                        
    <!--{if $categoryselect}-->                                        <tr>                                                <th class="th_cd">社区分类</th>                                                <td class="td_box_cd">                                                          $categoryselect                                                </td>                                        </tr>                                        
    <!--{/if}-->                                        <tr>                                                <th class="th_cd">隐私设置</th>                                                <td class="td_box_cd">                                                        <select name="friend" onchange="passwordShow(this.value);" class="td3_cd">                                                                <option value="0"$friendarr[0]>所有人可见</option>                                                                <option value="1"$friendarr[1]>仅好友可见</option>                                                                <option value="2"$friendarr[2]>仅指定可见</option>                                                                <option value="3"$friendarr[3]>仅自己可见</option>                                                                <option value="4"$friendarr[4]>输密码可见</option>                                                        </select>                                                </td>                                        </tr>                                        <tbody id="span_password" style="$passwordstyle">                                                <tr>                                                        <th class="th_cd">访问密码</th>                                                        <td  class="td_box_cd">
    <input type="text" name="password" id="uploadpassword" value="$album[password]" size="10" class="td_cd" />
    </td>                                                </tr>                                        </tbody>                                        <tbody id="tb_selectgroup" style="$selectgroupstyle">                                     <tr>                                                        <th class="th_cd">好友昵称</th>                                                        <td class="td_box_cd">                                                                <input name="target_names" id="target_names" rows="3"  class="td_cd" value="$album[target_names]" />                                                        </td>                                                </tr>                                                <tr>                                        </tbody>                                        <tr>                                                <th  class="th_cd">提交保存</th>                                                <td>                                                        <input type="hidden" name="referer" value="{echo dreferer()}" />                                                        <input type="hidden" name="editsubmit" value="true" />                                                        <button name="submit" type="submit"  class="b_btn2" value="true"><strong>确认修改</strong></button>                                                </td>                                        </tr>                                        
<tr>                                                <th class="th_cd">其它操作</th>                                                <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>                                        </tr>                                
</table>                                
<input type="hidden" name="formhash" value="{FORMHASH}" />                        
</form>    
</div>
</div>
<!--第一分页:相册编辑JS部分 -->            
<script type="text/javascript">                                 function passwordShow(value) {                                        if(value==4) {                                                document.getElementById('span_password').style.display = '';                                                document.getElementById('tb_selectgroup').style.display = 'none';                                        } 
else if(value==2) {                                                document.getElementById('span_password').style.display = 'none';                                                document.getElementById('tb_selectgroup').style.display = '';                                        } 
else {                                                document.getElementById('span_password').style.display = 'none';                                                document.getElementById('tb_selectgroup').style.display = 'none';                                        }                                }                                function getgroup(gid) {                                        if(gid) {                                                $.ajax({                                                type:'GET',                                                url:'home.php?mod=spacecp&ac=privacy&inajax=1&op=getgroup&gid='+gid,                                                dataType:'xml'                                                })                                                .success(function(s) {                                                        v = $(s.lastChild.firstChild.nodeValue).find('.show_message').html();                                                        v = v + ' ';                                                        document.getElementById('target_names').innerHTML += v;                                                });                                        }                                }                                                                $('#editsubmit').on('click', function() {                                        var obj = $(this);                                        var form = $(this.form);                                        popup.open('<img src="' + IMGDIR + '/imageloading.gif">');                                                                                 $.ajax({                                                type:'POST',                                                url:form.attr('action') +'&inajax=1',                                                data:form.serialize(),                                                dataType:'xml'                                        })                                        .success(function(s) {                                                popup.open(s.lastChild.firstChild.nodeValue);                                                window.location.href = 'home.php?mod=space&uid=$album[uid]&do=album&id=$albumid';                                        })                                        .error(function() {                                                popup.open('{lang networkerror}', 'wic_alert');                                        });                                        
return false;                                                                                                                                                });                        
</script>
<!--第二分页:图片编辑 -->
<!--{elseif $_GET['op'] == 'editpic'}-->
<!--第二分页:图片编辑-head -->
<header>
<div id="bq">            
<center>                 
<!--{if $space[uid]==$_G[uid]}-->                 <h2 id="h2">编辑图片                
<!--{/if}-->                     
<span id="a_l" onClick="javascript :history.back(-1);">返回</span>                    <a href="home.php?mod=space&do=album&view=me" id="a_r">我的相册</a>                
</h2>             
</center>    
</div> 
</header>
<!--第二分页:图片编辑-头部菜单 -->        
<div  class="kuang">                
<div class="up_kuang">                        
<ul class="ul">                                <!--{eval $aid = $albumid ? $albumid : -1;}-->                                <li class="li_lib_b"><a id="red" href="home.php?mod=space&uid=$album[uid]&do=album&id=$aid">查看相册</a></li>                                
<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>                                
<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>                                
<li  class="li_lib_b" ><a id="green" href="home.php?mod=space&uid=$album[uid]&do=album&view=me">相册列表</a>
</li>                        
</ul>                        
</div>                
</div>                
<!--第二分页:图片编辑-提示信息 -->                <div class="kuang">    
<div class="up_kuang2">                                    <div class="li_lib_a">[温馨提示]封面图的更新不会立即生效</div>    
</div>
</div>
<!--第二分页:图片编辑-功能区 -->        
<div class="kuang">    
<div class="up_kuang2">                
<!--{if $list}-->                        
<form method="post" autocomplete="off" id="theform" name="theform" action="home.php?mod=spacecp&ac=album&op=editpic&albumid=$albumid">                    
<table>                        
<th class="td_t1">                        选择                        </th>                        
<td class="td_t2">                        图片                        </td>                        
<td class="td_t3">                        操作                        </td>                        
<td class="td_t4">                           描述                                                 </td>                    
</table>                   
<!--{eval $common = '';}-->                
<!--{loop $list $value}-->                                
<li class="li_lib2">                        <table>                                                <th class="th">                        
<input type="checkbox" name="ids[{$value[picid]}]" value="{$value[picid]}" {$value[checked]}>                        </th>                        
<td  class="td1">                        
<a href="$value[bigpic]" target="_blank">
<img src="$value[pic]" alt="" width="80" class="td_img" /></a>                        </td>                        
<td class="td2">                        
<!--{eval $ids .= $common.$value['picid'].':'.$value['picid'];}-->                        <!--{eval $common = ',';}-->                        <!--{if $album[albumname]}-->                        <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>                        
<!--{/if}-->                        </td>                                                  <td class="td3">                                                    <textarea name="title[{$value[picid]}]" rows="4" cols="70" class="ms_kuang">$value[title] </textarea>                        
<input type="hidden" name="oldtitle[{$value[picid]}]" value="$value[title]" >                        </td>                    
</table>                
</li>                
<!--{/loop}-->                
<div class="up_kuang2">                        <li  class="li_lib2">                
<th class="th1">                
<label for="chkall" onclick="checkAll(this.form, 'ids')">
<input type="checkbox" name="chkall" id="chkall"  />
</label>                
</th>                
<td  class="td">                               <button type="submit" name="editpicsubmit" value="true" class="fm_btn1" onclick="this.form.action+='&subop=update';"><strong>更新描述</strong></button>                </td>                
<button type="submit" name="editpicsubmit" value="true" class="fm_btn1" onclick="this.form.action+='&subop=delete';return ischeck('theform', 'ids')"><strong>删除</strong></button>                
<!--{if $albumlist}-->                
<button type="submit" name="editpicsubmit" value="true" class="fm_btn1" onclick="this.form.action+='&subop=move';return ischeck('theform', 'ids')"><strong>移动到</strong></button>                
<select name="newalbumid" class="fm_btn2">                <!--{loop $albumlist $key $value}-->                <!--{if $albumid != $value[albumid]}-->
<option value="$value[albumid]">$value[albumname]</option>
<!--{/if}-->                
<!--{/loop}-->                
<!--{if $albumid>0}-->
<option value="0">默认相册</option>
<!--{/if}-->                
</select>                
<!--{/if}-->                                
</li>                                
<input type="hidden" name="page" value="$page" />                                <input type="hidden" name="editpicsubmit" value="true" />                                <input type="hidden" name="formhash" value="{FORMHASH}" />                                </div>                        
</form>
<!--第二分页:图片编辑-如果没有图片提示 -->                                                   <div class="up_kuang2">                                <!--{if $multi}-->                        <div>$multi</div>                        
<!--{/if}-->                        
</div>                        
<!--第二分页:图片编辑-JS部分 -->                                                        <script type="text/javascript">                                function checkAll(form, name) {                                        for(var i = 0; i < form.elements.length; i++) {                                                var e = form.elements[i];                                                if(e.name.match(name)) {                                                        e.checked = form.elements['chkall'].checked;                                                }                                        }                                }                                
function ischeck(id, prefix) {                                        form = document.getElementById(id);                                        for(var i = 0; i < form.elements.length; i++) {                                                var e = form.elements[i];                                                if(e.name.match(prefix) && e.checked) {                                                        if(confirm("您确定要执行本操作吗?")) {                                                                return true;                                                        } else {                                                                return false;                                                        }                                                }                                        }                                        popup.open('请选择要操作的对象','wic_alert');                                        return false;                                }                                var picObj = {{$ids}};                                function succeedhandle_setpichk(url, msg, values) {                                        
for(var id in picObj) {                                                document.getElementById('a_picid_' + picObj[id]).innerHTML = "{lang set_to_conver}";                                        }                                        if(values['picid']) {                                                document.getElementById('a_picid_' + values['picid']).innerHTML = "{lang cover_pic}";                                        }                                }                        </script>                
<!--{else}-->                   
<div class="up_kuang2">                                                <div>抱歉!相册是空的!</div>                   </div>                        
<!--{/if}-->
</div>
</div>
<!--第二分页:图片编辑-删除操作的提示 -->        
<div class="kuang">    
<div class="up_kuang2">                    
<text>删除提示:<p>如果删除的图片存在于帖子、博客文章中,删除之后将无法正常显示。</text>    
</div>
</div>
<!--{/if}-->
<!--{template common/footer}-->
没有账号? 忘记密码?

社交账号快速登录