织梦dede后台缩略图阅览图片效果选择缩略图

于 2021-12-27 10:10:00 发布
阅读量383 收藏
点赞数
分类专栏： 点滴记录 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19668427/article/details/122166001
版权

最近客户想要后台预览之前的图片库的图片，于是记录下
具体操作步骤：文件位置
找到织梦 根目录 include/dialog 目录下的文件，
select_images.php 用DW打开进行编辑

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

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

第二部：搜索 endloop 这个词 再下面加上如下JS代码 位置一定要放在这里。控制显示缩略图
}//End Loop
$dh->close();
?>

第三部：现在要修改的就是图片路径URL 文字的主要标签代码， 修改代码如下。直接复制替换就好。

   $line = "\n<tr>

    如此，大功告成！主要是修改了 UL标签的class 类，来明确鼠标再哪里划过会显示出缩略图层预览，方便找到之前的图片 完整代码如下

    /**
 * 图片选择框
 */
require_once(dirname(__FILE__)."/config.php");
include(DEDEDATA.'/mark/inc_photowatermark_config.php');
if(empty($activepath))
{
    $activepath = '';
}
if(empty($imgstick))
{
    $imgstick = '';
}
$noeditor = isset($noeditor)? $noeditor : '';
$activepath = str_replace('.', '', $activepath);
$activepath = preg_replace("#\/{1,}#", '/', $activepath);
if(strlen($activepath) < strlen($cfg_medias_dir))
{
    $activepath = $cfg_medias_dir;
}
$inpath = $cfg_basedir.$activepath;
$activeurl = '..'.$activepath;


if(empty($f))
{
    $f = 'form1.picname';
}
if(empty($v))
{
    $v = 'picview';
}
if(empty($comeback))
{
    $comeback = '';
}
$addparm = '';
if (!empty($CKEditor))
{
    $addparm = '&CKEditor='.$CKEditor;
    $f = $CKEditor;
}
if (!empty($CKEditorFuncNum))
{
    $addparm .= '&CKEditorFuncNum='.$CKEditorFuncNum;
}

if (!empty($noeditor))
{
    $addparm .= '&noeditor=yes';
}
?>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=<?php echo $cfg_soft_lang; ?>'>
<title>图片浏览器</title>
<link href='../../plus/img/base.css' rel='stylesheet' type='text/css'>
<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>
<script>
function nullLink(){ return; }
function ChangeImage(surl){ document.getElementById('picview').src = surl; }
</script>
</head>
<body background='img/allbg.gif' leftmargin='0' topmargin='0'>
<div id="floater" class="napisdiv">
<a href="javascript:nullLink();" onClick="document.getElementById('floater').style.display='none';"><img src='img/picviewnone.gif' id='picview' border='0' alt='单击关闭预览'></a>
</div>
<SCRIPT language=JavaScript src="js/float.js"></SCRIPT>
<SCRIPT language=JavaScript>
function nullLink(){ return; }
function ChangeImage(surl){ document.getElementById('floater').style.display='block';document.getElementById('picview').src = surl; }
function TNav()
{
	if(window.navigator.userAgent.indexOf("MSIE")>=1) return 'IE';
  else if(window.navigator.userAgent.indexOf("Firefox")>=1) return 'FF';
  else return "OT";
}
// 获取地址参数
function getUrlParam(paramName)
{
  var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
  var match = window.location.search.match(reParam) ;
  return (match && match.length > 1) ? match[1] : '' ;
}

function ReturnImg(reimg)
{
    var funcNum = getUrlParam('CKEditorFuncNum');
	if(funcNum > 1)
	{
		var fileUrl = reimg;
		window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);
	}
	if(window.opener.document.<?php echo $f?> != null)
	{
		window.opener.document.<?php echo $f?>.value=reimg;
		if(window.opener.document.getElementById('div<?php echo $v?>'))
	    {
		 if(TNav()=='IE'){
			 //window.opener.document.getElementById('div<?php echo $v?>').filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = reimg;
			 window.opener.document.getElementById('div<?php echo $v?>').src = reimg;
			 window.opener.document.getElementById('div<?php echo $v?>').style.width = '150px';
			 window.opener.document.getElementById('div<?php echo $v?>').style.height = '100px';
		 }
		 else
			 window.opener.document.getElementById('div<?php echo $v?>').style.backgroundImage = "url("+reimg+")";
	  }
		else if(window.opener.document.getElementById('<?php echo $v?>')){
			window.opener.document.getElementById('<?php echo $v?>').src = reimg;
		}
		if(document.all) window.opener=true;
	}
	
    window.close();
}
</SCRIPT>
<table width='100%' border='0' cellspacing='0' cellpadding='0' align="center">
<tr>
<td colspan='4' align='right'>
<table width='100%' border='0' cellpadding='0' cellspacing='1' bgcolor='#CBD8AC'>
<tr bgcolor='#FFFFFF'>
<td colspan='4'>
<table width='100%' border='0' cellspacing='0' cellpadding='2'>
<tr bgcolor="#CCCCCC">
<td width="8%" align="center" class='linerow' bgcolor='#EEF4EA'><strong>预览</strong></td>
<td width="47%" align="center" background="img/wbg.gif" class='linerow'><strong>点击名称选择图片</strong></td>
<td width="15%" align="center" bgcolor='#EEF4EA' class='linerow'><strong>文件大小</strong></td>
<td width="30%" align="center" background="img/wbg.gif" class='linerow'><strong>最后修改时间</strong></td>
</tr>
<tr>
<td class='linerow' colspan='4' bgcolor='#F9FBF0'>
点击“V”预览图片，点击图片名选择图片，显示图片后点击该图片关闭预览。
</td>
</tr>
<?php
$dh = dir($inpath);
$ty1="";
$ty2="";
while($file = $dh->read()) {

    //-----计算文件大小和创建时间
    if($file!="." && $file!=".." && !is_dir("$inpath/$file")){
        $filesize = filesize("$inpath/$file");
        $filesize = $filesize / 1024;
        if($filesize != "")
        if($filesize < 0.1){
            @list($ty1, $ty2) = split("\.", $filesize);
            $filesize = $ty1.".".substr($ty2, 0, 2);
        }
        else{
            @list($ty1, $ty2) = split("\.", $filesize);
            $filesize = $ty1.".".substr($ty2, 0, 1);
        }
        $filetime = filemtime("$inpath/$file");
        $filetime = MyDate("Y-m-d H:i:s", $filetime);
    }

    if($file == ".") continue;
    else if($file == "..")
    {
        if($activepath == "") continue;
        $tmp = preg_replace("#[\/][^\/]*$#i", "", $activepath);
        $line = "\n<tr>
   <td class='linerow' colspan='2'>
   <a href='select_images.php?imgstick=$imgstick&v=$v&f=$f&activepath=".urlencode($tmp).$addparm."'><img src=img/dir2.gif border=0 width=16 height=16 align=absmiddle>上级目录</a></td>
   <td colspan='2' class='linerow'> 当前目录:$activepath</td>
   </tr>
   ";
        echo $line;
    }
    else if(is_dir("$inpath/$file"))
    {
        if(preg_match("#^_(.*)$#i", $file)) continue; #屏蔽FrontPage扩展目录和linux隐蔽目录
        if(preg_match("#^\.(.*)$#i", $file)) continue;
        $line = "\n<tr>
   <td bgcolor='#F9FBF0' class='linerow' colspan='2'>
   <a href='select_images.php?imgstick=$imgstick&v=$v&f=$f&activepath=".urlencode("$activepath/$file").$addparm."'><img src=img/dir.gif border=0 width=16 height=16 align=absmiddle>$file</a></td>
   <td class='linerow'>　</td>
   <td bgcolor='#F9FBF0' class='linerow'>　</td>
   </tr>";
        echo "$line";
    }
    else if(preg_match("#\.(gif|png)#i", $file))
    {
        $reurl = "$activeurl/$file";
        $reurl = preg_replace("#^\.\.#", "", $reurl);
        if($cfg_remote_site=='Y' && $remoteuploads == 1)
         {
           $reurl  = $remoteupUrl.$reurl;
        }else{
            $reurl = $reurl;
        }

        if($file==$comeback) $lstyle = " style='color:red' ";
        else  $lstyle = "";

        $line = "\n<tr>
   <td align='center' class='linerow' bgcolor='#F9FBF0'>
   <a href=\"#\" onClick=\"ChangeImage('$reurl');\"><img src='img/picviewnone.gif' width='16' height='16' border='0' align=absmiddle></a>
   </td>
   <td class='linerow' bgcolor='#F9FBF0'>
   <a href=# οnclick=\"ReturnImg('$reurl');\" $lstyle><img src=img/gif.gif border=0 width=16 height=16 align=absmiddle>$file</a></td>
   <td class='linerow'>$filesize KB</td>
   <td align='center' class='linerow' bgcolor='#F9FBF0'>$filetime</td>
   </tr>";

        echo "$line";
    }
    else if(preg_match("#\.(jpg)#i", $file))
    {
        $reurl = "$activeurl/$file";
        $reurl = preg_replace("#^\.\.#", "", $reurl);
        if($cfg_remote_site=='Y' && $remoteuploads == 1)
         {
           $reurl  = $remoteupUrl.$reurl;
        }else{
            $reurl = $reurl;
        }

        if($file==$comeback) $lstyle = " style='color:red' ";
        else  $lstyle = "";

        $line = "\n<tr>
   <td align='center' class='linerow' bgcolor='#F9FBF0'>
   <a href=\"#\" onClick=\"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');\" οnclick=\"ReturnImg('$reurl');\" $lstyle><img src=img/jpg.gif border=0 width=16 height=16 align=absmiddle>$file</a></ul>
   </td>
   <td class='linerow'>$filesize KB</td>
   <td align='center' class='linerow' bgcolor='#F9FBF0'>$filetime</td>
   </tr>";
        echo "$line";
    }
}//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>
<tr>
<td colspan='4' bgcolor='#E8F1DE'>

<table width='100%'>
<form action='select_images_post.php' method='POST' enctype="multipart/form-data" name='myform'>
<?php $noeditor = !empty($noeditor)?"<input type='hidden' name='noeditor' value='yes'>":''; echo $noeditor;//（2011.08.25 根据用户反馈修正图片上传回调 by:织梦的鱼）?>
<input type='hidden' name='activepath' value='<?php echo $activepath?>'>
<input type='hidden' name='f' value='<?php echo $f?>'>
<input type='hidden' name='v' value='<?php echo $v?>'>
<input type='hidden' name='imgstick' value='<?php echo $imgstick?>'>
<input type='hidden' name='CKEditorFuncNum' value='<?php echo isset($CKEditorFuncNum)? $CKEditorFuncNum : 1;?>'>
<input type='hidden' name='job' value='upload'>
<tr>
<td background="img/tbg.gif" bgcolor="#99CC00">
  &nbsp;上　传： <input type='file' name='imgfile' style='width:250px'/>
  <input type='checkbox' name='needwatermark' value='1' class='np' <?php if($photo_markup=='1') echo "checked"; ?> />水印
  <input type='checkbox' name='resize' value='1' class='np' />缩小
  宽：<input type='text' style='width:30' name='iwidth' value='<?php echo $cfg_ddimg_width?>' />
  高：<input type='text' style='width:30' name='iheight' value='<?php echo $cfg_ddimg_height?>' />
  <input type='submit' name='sb1' value='确定' />
</td>
</tr>
</form>
</table>

</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
    流年之年
    关注
    • 0
      点赞
    • 踩
    • 0
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    专栏目录
    如何从服务器获取图片并显示为缩略图且可以进行预览
    weixin_42860747的博客
    07-28 1438
    如何从服务器获取图片并显示为缩略图且可以进行预览 注:对应该文章通过upload上传图片的文章地址: 通过upload上传图片 <el-image style="width: 100px; height: 40px" :src="srcOne" :preview-src-list="srcListOne"> </el-image> 使用elementui给的模板 src为缩略图 preview-src-list为点击缩略图后的预览图
    织梦缩略图php,dedecms织梦图集缩略图不能显示
    weixin_42534100的博客
    03-18 183
    在dedecms织梦程序中图片集也是很多朋友都喜欢使用的功能，但是也有的时候上传的图片是不能显示的，图片集中的缩略图不能显示很大的原因在于上传的图片大小是不符合织梦后台设置的默认缩略图大小的。解决织梦图片集中缩略图不显示的方法：第一种方法：修改织梦默认的缩略图大小修改织梦默认大小，使织梦默认缩略图的高或宽小于上传的图片集中的大小。第二种方法：修改程序文件打开include/image.func.p...
    织梦DEDECMS列表有缩略图则显示缩略图,无缩图则不显示图
    PHP错误汇总
    09-24 243
    织梦DEDECMS列表有缩略图则显示缩略图,无缩图则不显示图 不少用DEDECMS建站的朋友想实现这个功能，有时候未必偏偏文章都会配有图片，所以就想实现有缩略图则显示缩略图，无缩图则不显示图片。 可以按照下面这个方法修改实现，打开文件　　(这是默认模板) 找到以下这段代码： [field:array runphp='yes']@me = (emptyempty(@me['litpic']) ? "" : "<a class="preview" href="{@me["><img s
    dedecms文章内页获取缩略图的调用标签
    zxy840552216的博客
    08-12 109
    文章内容页缩略图的调用，图片集内容页缩略图的调用，相信大家都想找这个，对于初学者来说，很容易混淆。 比如我就在这个问题上犯 了糊涂，我在跟客户做网站的过程中，在内页用到了缩略图的调用。当时也没注意，直接写了[filed:picname/]后来客户反映调用出错。于 是查找了一下原因发现在dedecms中，内页想调用缩略图只能用{dede:field.picname/}来实现。 ...
    dede内容页调用缩略图 缩略图多种用法
    zhnwhsb的博客
    10-03 1133
    文章内容页调用缩略图方法如下两种.第一种没有大小设置.原图显示.第二种.可以设大小, {dede:field.image/} 列表页.和其它频页调用,也是第一种没有大小设置.第二种自由设置大小. [field:imglink/]
    织梦栏目新增缩略图功能
    05-08
    这次我们要讨论的是如何在织梦的栏目中新增缩略图功能，这是一个非常实用的功能，可以提升网站的视觉效果和用户体验。 首先，我们需要理解织梦（DedeCMS）的后台工作原理。织梦系统基于PHP语言开发，使用MySQL作为...
    织梦文章微信分享带缩略图与简介.zip
    04-08
    织梦文章微信分享带缩略图与简介
    织梦DEDE_XML地图
    11-30
    织梦DEDE_XML地图是针对织梦CMS（DedeCMS）系统的一种特殊文件，用于帮助搜索引擎更好地理解和抓取网站内容。织梦CMS是中国广泛应用的开源内容管理系统，它提供了丰富的功能和自定义选项，使得网站建设和管理更为...
    织梦dede后台使用教程通用版.doc
    10-08
    织梦dede后台使用教程通用版.doc 这篇教程主要介绍了织梦dede后台的使用方法， 涉及到栏目设置、封面属性、列表属性、隐藏栏目等多个方面。 首先，教程讲解了栏目设置的两种类型：最终列表和封面。最终列表是可以...
    dede5.7每个栏目增加缩略图
    10-21
    修改了以前各个栏目是同一缩略图的bug 各个栏目可以上传不同的缩略图 测试通过 贡献给大家 dede5 7栏目增加缩略图修改正子栏目缩略图2013 10 21 rar 更多技术文档我的博客：http: l00365 blog 163 com
    jquery实现缩略图边框跟随鼠标移动特效.rar
    09-05
    jquery实现缩略图边框跟随鼠标移动特效.rar
    织梦获取文章缩略图及正文本图片标签
    luxiuwen的专栏
    06-16 4104
    织梦获取文章缩略图及正文本图片标签 获取文章简略标题 [field:shorttitle/] 织梦自动调出一级栏目下的二级栏目 {dede:channelartlist row=6} 更多>> {dede:field name="typename"/} {dede:arclist row=1 infolen=800 orde
    DedeCms织梦缩略图有则显示,没有则显示自定义的随机图片
    云度
    05-14 1529
    百度霸屏推广在对企业站进行改版时，发现大部分企业网站的文章当初添加时没有图片，改版后的文章列表页面调用了缩略图，织梦默认的话是没有缩略图就显示自定义的那张defaultpic.gif，这样的话列表页的缩略图就是同一张了，非常影响美观。 我们要的效果是：当文章有缩略图时显示文章的缩略图；当文章没有缩略图时，就随机显示我们给出的几百张缩略图中的一张。这样一来列表页面的文章都有缩略图，同时还都不一样。 ...
    dedecms教程：文章内页获取缩略图的调用标签
    01-27 311
    文章内容页缩略图的调用，图片集内容页缩略图的调用，相信大家都想找这个，对于初学者来说，很容易混淆。  比如大江网络就在这个问题上犯 了糊涂，大江网络在跟客户做网站的过程中，在内页用到了缩略图的调用。当时也没注意，直接写了[filed:picname/]后来客户反映调用出错。于 是查找了一下原因发现在dedecms中，内页想调用缩略图只能用{dede:field.picname/}来实现。
    详解DEDECMS缩略图标签[field:picname/]和[field:litpic/]的区别
    weixin_44006570的博客
    07-03 1247
    显示出二级栏目及以下的所有图片（包含三级栏目的） ? 1 2 3 4 5 6 <ul class="incps"> {dede:arclist row=9 col="3" typeid='3' titlelen=15 type='image.'imgwidth='234' imgheight='214'}...
    后台截图(二）
    icefairy的专栏
    10-21 1377
    后台截图(二） http://weibo.com/p/23047911948774 http://weibo.com/p/23047911948775 http://weibo.com/p/23047911948783 http://weibo.com/p/23047911948792 http://weibo.com/p/23047911948784 http://weibo.com
    织梦判断缩略图是否为空输出不同样式
    weixin_30328063的博客
    11-03 197
    有时候我们在模板中对文章有缩略图的就显示缩略图，没有缩略图就换个样式，不让它显示为"暂无缩略图"。 简单的单独的缩略图 {dede:field.litpic runphp=yes} if(@me == '/images/defaultpic.gif')@me = "";else @me = "<div class='pic'><img src='@me' class='Pi...
    dedecms V5.7笔记：判断空值或含有某个值的写法（例如是否推荐文章，是否图片等）及field:picname function='thumb(@me最大比例缩图的显示判断
    遗忘
    03-31 2366
    今天要用的是列表页中的推荐文章加个图标和空值与非空值的输出 第一点：推荐文章，用if判断含有推荐属性的时候，不能简单的判断flag=c 这样的话诸如c,p或c,h这样属性的时候就失效了 这里要用到一个php函数：strpos strpos(string,find,start)这段代码中string和find是必需的,start可选 相当于在string中找寻是否含有find值的意思 上
    DEDE列表调用有缩图显示缩图,无缩图则不显示缩图
    shilianweiyao的专栏
    01-06 647
    在list_article.htm模板页里，有文章列表没有图片，但是前面会显示“无缩略图”，就是当没有图片的时候，怎么样去掉这个“无缩略图”的原始默认缩图， 下面我们只需要把原来列表调用标签中的以下代码： [field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "a href='{@me['arcurl']}'>img sr
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值