destoon教程之详情页显示5张缩略图

destoon默认详情页主图下面只有3张缩略小图，如图：由于需求，我们需要将3张图增加至5张。然而就是这样一个看似很简单的问题，在初期我们整整折腾了3天才解决！下面来将实现此功能的详细步骤记录下来，以便日后备用。注意：此教程制作时是destoon v5.0版本，由于不同版本写法略有改变，可能文章中提及的行号与看官看到的并不对称，请仔细看图，根据图片中上下段代码进行修改。

详情页展示的图片都是从后台调取出来的，如果想要在详情页展示5张图片，我们必须要在数据库中添加字段及修改后台源码。艺灵会告诉你：这样一个小小的功能，你需要修改6个页面么？坑爹的destoon！！！由于修改页面之多以及细节繁杂，如有需要此功能的看官请仔细看好每一处修改的内容，以免出错，建议修改前做好备份工作。

一、修改mall.class.php

先来张后台上传图片那里默认的界面吧，如图： 下面是查找控制这里图片的源码页面。路径：根目录/module/mall/mall.class.php,用dw等其它编码软件打开文件。找到第19行，在‘thumb1‘,‘thumb2‘,后面增加‘thumb3‘,‘thumb4‘,。如图： thumb是在数据字典中的解释是：标题图，很明显，默认是3张图，我们再增加2张才能显示5张。

由于我们新添加的字段thumb3,thumb4并不存在原数据库中，所以我们需要在phpmyadmin中添加这两个字段。

在浏览器中打开你的phpmyadmin，输入密码进去后找到destoon_mall表，然后在thumb2的下面新增thumb3,thumb4。如图：添加完表字段后继续来修改mall.class.php页面。

85行左右

  1. <!--新增代码-->
  2. if($post[‘thumb3‘]) $new .= ‘<img src="‘.$post[‘thumb3‘].‘">‘;
  3. if($post[‘thumb4‘]) $new .= ‘<img src="‘.$post[‘thumb4‘].‘">‘;

92行左右

  1. <!--新增代码-->
  2. if($r[‘thumb3‘]) $old .= ‘<img src="‘.$r[‘thumb3‘].‘">‘;
  3. if($r[‘thumb4‘]) $old .= ‘<img src="‘.$r[‘thumb4‘].‘">‘;

如图：

155行左右

  1. <!--修改源码，黄色高亮为新增-->
  2. clear_upload($post[‘content‘].$post[‘thumb‘].$post[‘thumb1‘].$post[‘thumb2‘].$post[‘thumb3‘].$post[‘thumb4‘], $this->itemid);

171行左右

  1. <!--修改源码，黄色高亮为新增-->
  2. clear_upload($post[‘content‘].$post[‘thumb‘].$post[‘thumb1‘].$post[‘thumb2‘].$post[‘thumb3‘].$post[‘thumb4‘], $this->itemid);

如图：

252行左右

  1. <!--新增代码-->
  2. if($r[‘thumb3‘]) delete_upload($r[‘thumb3‘], $userid);
  3. if($r[‘thumb4‘]) delete_upload($r[‘thumb4‘], $userid);

如图：

好了，第一个页面已修改完毕，然而这只是一个页面，还有5个页面需要修改才能成功显示5图，是不是非常坑爹？！

二、修改edit.tpl.php

路径：根目录/module/mall/admin/template/edit.tpl.php，打开文件后开始修改。

87行左右

  1. <!--新增代码-->
  2. <input type="hidden" name="post[thumb3]" id="thumb3" value="<?php echo $thumb3;?>"/>
  3. <input type="hidden" name="post[thumb4]" id="thumb4" value="<?php echo $thumb4;?>"/>

94行左右

  1. <!--新增代码-->
  2. <td width="120"><img src="<?php echo $thumb3 ? $thumb3 : DT_SKIN.‘image/waitpic.gif‘;?>" width="100" height="100" id="showthumb3" title="预览图片" onclick="if(this.src.indexOf(‘waitpic.gif‘) == -1){_preview(Dd(‘showthumb3‘).src, 1);}else{Dalbum(3,<?php echo $moduleid;?>,<?php echo $MOD[‘thumb_width‘];?>,<?php echo $MOD[‘thumb_height‘];?>, Dd(‘thumb3‘).value, true);}"/></td>
  3. <td width="120"><img src="<?php echo $thumb4 ? $thumb4 : DT_SKIN.‘image/waitpic.gif‘;?>" width="100" height="100" id="showthumb4" title="预览图片" onclick="if(this.src.indexOf(‘waitpic.gif‘) == -1){_preview(Dd(‘showthumb4‘).src, 1);}else{Dalbum(4,<?php echo $moduleid;?>,<?php echo $MOD[‘thumb_width‘];?>,<?php echo $MOD[‘thumb_height‘];?>, Dd(‘thumb4‘).value, true);}"/></td>

101行左右

  1. <!--新增代码-->
  2. <td><span onclick="Dalbum(3,<?php echo $moduleid;?>,<?php echo $MOD[‘thumb_width‘];?>,<?php echo $MOD[‘thumb_height‘];?>, Dd(‘thumb3‘).value, true);" class="jt"><img src="<?php echo $MODULE[2][‘linkurl‘];?>image/img_upload.gif" width="12" height="12" title="上传"/></span>  <img src="<?php echo $MODULE[2][‘linkurl‘];?>image/img_select.gif" width="12" height="12" title="选择" onclick="selAlbum(3);"/>  <span onclick="delAlbum(3, ‘wait‘);" class="jt"><img src="<?php echo $MODULE[2][‘linkurl‘];?>image/img_delete.gif" width="12" height="12" title="删除"/></span></td>
  3. <td><span onclick="Dalbum(4,<?php echo $moduleid;?>,<?php echo $MOD[‘thumb_width‘];?>,<?php echo $MOD[‘thumb_height‘];?>, Dd(‘thumb4‘).value, true);" class="jt"><img src="<?php echo $MODULE[2][‘linkurl‘];?>image/img_upload.gif" width="12" height="12" title="上传"/></span>  <img src="<?php echo $MODULE[2][‘linkurl‘];?>image/img_select.gif" width="12" height="12" title="选择" onclick="selAlbum(4);"/>  <span onclick="delAlbum(4, ‘wait‘);" class="jt"><img src="<?php echo $MODULE[2][‘linkurl‘];?>image/img_delete.gif" width="12" height="12" title="删除"/></span></td>

如图：

三、修改module.func.php

路径：根目录/include/module.func.php，打开文件后开始修改。

240行左右

  1. <!--新增代码-->
  2. if($item[‘thumb3‘] && !preg_match("/^[a-z0-9\-\.\:\/]{50,}$/i", $item[‘thumb3‘])) $item[‘thumb3‘] = ‘‘;
  3. if($item[‘thumb4‘] && !preg_match("/^[a-z0-9\-\.\:\/]{50,}$/i", $item[‘thumb4‘])) $item[‘thumb4‘] = ‘‘;

248行左右

  1. <!--新增代码-->
  2. $imgs[] = $item[‘thumb3‘] ? $item[‘thumb3‘] : $nopic;
  3. $imgs[] = $item[‘thumb4‘] ? $item[‘thumb4‘] : $nopic;

255行左右

  1. <!--新增代码-->
  2. $imgs[] = $item[‘thumb3‘] ? str_replace(‘.thumb.‘, ‘.middle.‘, $item[‘thumb3‘]) : $nopic;
  3. $imgs[] = $item[‘thumb4‘] ? str_replace(‘.thumb.‘, ‘.middle.‘, $item[‘thumb4‘]) : $nopic;

如图：

好了，我们再到后台随便添加一款商品做下测试吧。经测试，已经可以成功添加第4张，第5张图片，并且前台页面可以展示，效果图： 

你以为这样就完了吗？当然没有啦！因为现在改的是超级管理员的后台，而商家后台仍是3张图片，不信你看。

是不是有种想拿块板砖拍人的冲动？前面修改了十几处才好不容易将3张图修改成5张图，现在又要修改商家页面，destoon坑爹无极限啊！！！

四、修改my.inc.php

路径：根目录/module/mall/my.inc.php，打开文件后开始修改。

79行左右

  1. <!--修改源码，黄色高亮为新增-->
  2. if(!$IMVIP && $MG[‘uploadpt‘]) $post[‘thumb1‘] = $post[‘thumb2‘] = $post[‘thumb3‘] = $post[‘thumb4‘] =‘‘;

149行左右

  1. <!--修改源码，黄色高亮为新增-->
  2. $thumb = $thumb1 = $thumb2 = $thumb3 = $thumb4 = ‘‘;

189行左右

  1. <!--新增代码-->
  2. $post[‘thumb3‘] = $item[‘thumb3‘];
  3. $post[‘thumb4‘] = $item[‘thumb4‘];

如图：

五、修改my_mall.htm

路径：根目录/template/文件夹/member/my_mall.htm，打开文件后开始修改。

89行左右

  1. <!--新增代码-->
  2. <input type="hidden" name="post[thumb3]" id="thumb3" value="{$thumb3}"/>
  3. <input type="hidden" name="post[thumb4]" id="thumb4" value="{$thumb4}"/>

99行左右

  1. <!--新增代码-->
  2. <td width="120"><img src="{if $thumb3}{$thumb3}{else}{DT_SKIN}image/waitpic.gif{/if}" width="100" height="100" id="showthumb3" title="预览图片" onclick="if(this.src.indexOf(‘waitpic.gif‘) == -1){_preview(Dd(‘showthumb3‘).src, 1);}else{Dalbum(3,{$moduleid},{$MOD[thumb_width]},{$MOD[thumb_height]}, Dd(‘thumb3‘).value, true);}"/></td>
  3. <td width="120"><img src="{if $thumb4}{$thumb4}{else}{DT_SKIN}image/waitpic.gif{/if}" width="100" height="100" id="showthumb4" title="预览图片" onclick="if(this.src.indexOf(‘waitpic.gif‘) == -1){_preview(Dd(‘showthumb4‘).src, 1);}else{Dalbum(4,{$moduleid},{$MOD[thumb_width]},{$MOD[thumb_height]}, Dd(‘thumb4‘).value, true);}"/></td>

111行左右

  1. <!--新增代码-->
  2. <td><img src="{DT_STATIC}{$MODULE[2][moduledir]}/image/img_upload.gif" width="12" height="12" title="上传" onclick="Dalbum(3,{$moduleid},{$MOD[thumb_width]},{$MOD[thumb_height]}, Dd(‘thumb3‘).value, true);"/>  <img src="{DT_STATIC}{$MODULE[2][moduledir]}/image/img_select.gif" width="12" height="12" title="选择" onclick="selAlbum(3);"/>  <img src="{DT_STATIC}{$MODULE[2][moduledir]}/image/img_delete.gif" width="12" height="12" title="删除" onclick="delAlbum(3,‘wait‘);"/></td>
  3. <td><img src="{DT_STATIC}{$MODULE[2][moduledir]}/image/img_upload.gif" width="12" height="12" title="上传" onclick="Dalbum(4,{$moduleid},{$MOD[thumb_width]},{$MOD[thumb_height]}, Dd(‘thumb4‘).value, true);"/>  <img src="{DT_STATIC}{$MODULE[2][moduledir]}/image/img_select.gif" width="12" height="12" title="选择" onclick="selAlbum(4);"/>  <img src="{DT_STATIC}{$MODULE[2][moduledir]}/image/img_delete.gif" width="12" height="12" title="删除" onclick="delAlbum(4,‘wait‘);"/></td>

如图：

六、修改post.func.php

路径：根目录/include/post.func.php，打开文件后开始修改。

777行左右

  1. <!--新增代码-->
  2. if(isset($post[‘thumb3‘]) && !is_url($post[‘thumb3‘])) $post[‘thumb3‘] = ‘‘;
  3. if(isset($post[‘thumb4‘]) && !is_url($post[‘thumb4‘])) $post[‘thumb4‘] = ‘‘;

如图：

好了，终于修改完了，商家后台也可以上传5张图片了，如图：

小结

虽然修改的页面很多，但基本上都是添加那两个thumb3,thumb4这两个字段代码。如有疑问，可在下方评论区中留言。

时间： 2024-10-10 18:15:33

destoon教程之详情页显示5张缩略图的相关文章

Ecshop商品详情页显示当前会员等级价格

会员登录状态下,在ECSHOP商品详情页的本店售价中显示当前登录会员对应的等级价格,在未登录状态下,则还默认显示原来的本店售价. 解决方法: 这个需要修改ECSHOP程序代码来实现. 打开文件 /includes/lib_goods.php 将 $row['shop_price_formated'] = price_format($row['shop_price']); 修改为 $row['shop_price_formated'] = $_SESSION[user_rank] ? price_

在ecshop商品详情页显示供货商

好久没写文章了,隐约记得前几天有人问到这个问题:[如何在ecshop商品详情页面显示该商品的供货商?] 今天有时间整理下,分享给大家. 注:以下修改适用于ecshop2.7.2,其他版本未做测试. 1). 首先需要修改程序文件,将供货商读取出来,然后赋值给模板 打开文件 /goos.php, 在 $smarty->assign('goods', $goods); 上边增加以下代码 if($goods['suppliers_id']) { $goods['suppliers_name']=$db-

如何在ecshop商品详情页显示供货商信息

以下范例以ecshop2.7.2原型做为修改: 1.首先需要修改程序文件,将供货商读取出来,然后赋值给模板, 打开文件 /goos.php, 在 $smarty->assign('goods',              $goods); 上边增加以下代码 if($goods['suppliers_id']) { $goods['suppliers_name']=$db->getOne("select suppliers_name from " .$ecs->tabl

（转）ecshop产品详情页显示不清晰

详情页面的商品图片的设置方法 后台商店设置-显示设置-显示设置(就是这里,商品图片宽度和高度设置的大点就行了,放大镜效果也清晰了) 按照您详情页面图片的实际显示大小来添写. 商品管理-图片批量处理,这样这些图片会由程序重新按比例生成一次. 很多客户反映详情页面商品的放大镜放大效果不明显,其实放大镜的原理是将您上传的商品图片原始文件调用出来,如果您上传的原始图片本身就小,那么放大镜效果是出不来的.

R: 一页显示多张图的方法

################################################### 问题:一页多图显示   18.4.30 怎么实现,在一页上画多幅图,并且安排图的大小.个数等??? 解决方案: open <- par(mfrow = c(2,2),mar=c(3,3,2,1)) r(open) layout(matrix(1:6,3,2))   #将当前装置分割为3行2列的布局 layout.show(6)   #显示布局的编号 layout(matrix(1:6,2,3)

aChartEngine图表显示（一页显示多张图表）

在看本篇的时候,请确认已经看过了 某android平板项目开发笔记----aChartEngine图表显示(1) 不然,有些地方这里就不再说明… 关于XYMutilpleSeriesDataset 一些注意的地方 我们可以使用的所有Series对象关系如下图 从图中,我们可以看出,XYMutilpleSeriesDataset 只能添加XYSeries,对于,线性图而言,我们需要明确输入x,y值,这样问题不是很大,但是,对于条形图,饼图,对于x轴的属性就有点多余了,对于非线性图而言,我们需要的数

MVC-内容详情页显示内容

@model InfoDataProvider.DataModel.FAQ_ContentUser 内容Content字段:如果里面有html标签. @Html.DisplayFor(p => p.Content):将会对html标签进行编码输出到页面上. 效果:<span style="color:Red">红色<span> @Html.Raw(Model.Content):将会对html标签进行解析输出到页面上. 效果:红色

如何实现WordPress不同分类则每页显示不同数量的文章

有时我们需要让wordpress不同的分类显示不同数量的文章并分页,比如资讯的分类页显示20篇并分页,教程的分类页显示10篇并分页,要如何实现呢?随ytkah一起来看看吧!把下面的代码加入当前主题的function.php文件中 function filter_pre_get_posts( $query ){ if ( $query->is_main_query() ){ $num = ''; if ( is_category(array(9)) ){ $num = 14; } //if ( i

[ionic开源项目教程] - 第9讲 新闻详情页的实现

目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单 [ionic开源项目教程] 第4讲 通过Service层获取新闻列表 [ionic开源项目教程] 第5讲 如何在项目中使用全局配置 [ionic开源项目教程] 第6讲 过滤器filter的使用 [ionic开源项目教程] 第7讲 实现