织梦后台站内图片选择浏览缩略图的功能代码

作者 : Maria Orlova 发布时间: 2021-03-26 共41人阅读

目前织梦后台的站内图片是没有预览功能,导致客户不能正确的看到自己上传图片的样式,收集到一个方式可以实现,直接上教程:

织梦后台小功能:先放一张修改好的效果图给大家看一下,用处还是很棒的,超赞。

织梦后台站内图片选择浏览缩略图的功能代码

具体操作步骤:文件位置
找到织梦 根目录  include/dialog 目录下的文件,
select_images.php 用DW打开进行编辑

第一步:找到style 标签 修改 style样式为 如下:
目的是为了引入JS悬浮代码和调整悬浮层的样式代码。

<style>
.linerow {border-bottom: 1px solid #CBD8AC;}
.bb {width:150px;height:100px;position:absolute;z-index:3;display:none;}
</style>
<script>
function nullLink(){ return; }
function ChangeImage(surl){ document.getElementById('picview').src = surl; }
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

再 head 标签上面加了一个 query 鼠标跟随   显示图片的JS 以确保 图片始终跟随 鼠标 显示。

第二部:搜索 endloop 这个词 再下面加上如下JS代码  位置一定要放在这里。控制显示缩略图

}//End Loop
$dh->close();
?>
<script type="text/javascript">
    $('.bb').hide();
    $('.zz').mousemove(function(e){
        $('.bb').eq($(this).index()).show().css({
            "top": e.pageY+20,
            "left": e.pageX+20
        }).siblings("div").hide();
    });
    $('.zz').mouseleave(function(){
        $('.bb').hide();
    });
</script>
第三部:现在要修改的就是图片路径URL 文字的主要标签代码, 修改代码如下。直接复制替换就好。
       $line = "\n<tr>
   <td align='center' class='linerow' bgcolor='#F9FBF0'>
   <a href=\"#\" onMouseOver=\"ChangeImage('$reurl');\"><img src='img/picviewnone.gif' width='16' height='16' border='0' align=absmiddle></a>
   </td>
   <td class='linerow' bgcolor='#F9FBF0'>
 <ul class='zz'><a href=#   onMouseOver=\"ChangeImage('$reurl');\" onclick=\"ReturnImg('$reurl');\" $lstyle><img src=img/jpg.gif border=0 width=16 height=16 align=absmiddle>$file</a></ul>
如此,大功告成!主要是修改了 UL标签的class 类,来明确鼠标再哪里划过会显示出缩略图层。下面有完成后的效果图,选择图片的时候就能看见图片的样子了。太棒了,喜欢织梦二次开发的朋友可以一起交流。