joyo模板图片缩略图的实现

2016-07-07 16:16 来源：www.chinab4c.com 作者：ecshop专家

偶用的JOYO模板，想实现烧包模板下的鼠标指到商品图片时，自动显示缩略图功能，已经在论坛里看到过一个帖子（http://www.bbs.ecshop.com/viewthread.php?tid=27305&highlight=KIDS），但技术有限，看不明白。还望各位高手能够提供一下详细的操作步骤帮助。多谢！

回答：
明天或者今天晚上，希望我有空整理一个完整的修改步骤。

先谢了！ 偶是越来越爱EC了，自己能学东西，还有这么多EC的专业人员帮助，太好了！

1，下载附件，放到EC程序的js目录中。

preview.js (4.12 KB)


2，打开style.css 在最后面复制以下代码
  1. /*===== Loader_previewStyle 图片载入 =====*/

  3. .border_preview{
  4. z-index:100;
  5. position:absolute;
  6. background: #fff;
  7. border: 1px solid #FBE2E5;
  8. }
  9. #loader_container {
  10. text-align:center;
  11. position:absolute;
  12. top:40%;
  13. width:100%
  14. }
  15. #loader_preview {
  16. font-family:Tahoma, Helvetica, sans;
  17. font-size:12px;
  18. color:#000000;
  19. background-color:#FFFFFF;
  20. padding:10px 0 16px 0;
  21. margin:0 auto;
  22. display:block;
  23. width:135px;
  24. border:1px solid #09C;
  25. text-align:left;
  26. z-index:255;
  27. filter: progid:DXImageTransform.Microsoft.BasicImage(opacity=.65);
  28. opacity: 0.65;
  29. }
  30. .preview_temp_load {
  31. vertical-align:middle;
  32. text-align:center;
  33. padding: 15px 0 0 0;
  34. padding-bottom:15px;
  35. }
  36. .preview_temp_load img{
  37. vertical-align:middle;
  38. text-align:center;
  39. border:1px solid #FC7AC4;
  40. }
  41. #preview_div {
  42. display: none;
  43. position: absolute;
  44. z-index: 110;
  45. left: -500px;
  46. top: 48px;
  47. }
复制代码
3，打开模板目录中library文件夹下的page_header.lbi。在所有代码最后面回车，复制粘贴以下代码
  1. {insert_scripts files="preview.js"}<div id="preview_div"></div>
复制代码
4，打开模板目录中library文件夹下的recommend_best.lbi ，搜索
  1. <a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name|escape:html}" /></a>
复制代码
就是显示图片的这句，不同的模板这里可能不一样，搜索不到就手工找到它。

替换为
  1. <a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name|escape:html}"onmouseover="showtrail('{$goods.goods_img}','{$goods.name|escape:html}',{$image_width},{$image_height})"onmouseout="hidetrail()" /></a>
复制代码
这样首页的推荐商品就可以实现鼠标移上移出出现大缩略的效果了。

其他recommend_hot.lbi ，recommend_new.lbi ，recommend_promotion.lbi依次执行第四步。

鼠标点至商品图片后，出现一个商品大缩略，在整个网页的最上端，若我说的不够形象，还请QingHou 到我的网站www.shopcrazy.cn看一下。多谢！期待解决：）

抱歉，抱歉，漏写了一步。

楼上的楼上已经修复。

哈哈！搞定！多谢QingHou ！偶爱死你了！！

啊！还是有问题，自动大缩略只能在首页实现，其他像产品分类下页面无法实现

想在哪里显示就打开哪个文件执行第四步。

呵呵，QH老大真可爱，虽然之前我就已经实现了，还是顶下吧！

好贴留名字!!!


学习到了.HQ大大强.

路过........

这样的东西用多了 感觉对网站速度还是有影响的