您现在的位置是:首页 > cms教程 > Ecshop商城教程Ecshop商城教程

ecshop商品相册鼠标移动滑过小缩略图显示大商品图片

郭俊立2024-03-30Ecshop商城教程已有人查阅

导读部分人ECSHOP模板商品页面商品相册缩略图小图要靠点击才会显示商品大图先打开goods.dwt在之间。然后找到代码:

部分人ECSHOP模板商品页面商品相册缩略图小图要靠点击才会显示商品大图先打开goods.dwt
添加代码:
<script type="text/javascript">
function change_img(img_src)
{
document.getElementsByName(“goods_img”)[0].src="/a/2406248/img_src;}
</script>
在<head></head>之间。
然后找到代码:
<img src="/a/2406248/{$goods.goods_img}" rel="nofollow"/>在”{$goods.goods_name|escape:html}”代码的后面加上:
name="goods_img"
最后打开goods_gallery.lbi
找到代码:
<!- {foreach from=$pictures item=picture}->
<li><a href="/a/2406248/gallery.php?id={$id}&img={$picture.img_id}" target="_blank" rel="nofollow"></li>
<!-{/foreach}->
在class="B_blue"后面加上:
onmouseOver="change_img(this.src)" />
保存,运行即可。
经过上面的测试,鼠标滑过小图,在上面的图片显示位置显示的还是小图,原因在于:onmouseOver=”change_img(this.src)”,这段代码的意思是在上面的图片显示区显示当前的图片地址,this.src,而当前的图片地址正好是小图,解决方法:
将上面提到的:
<img src="/a/2406248/{if" rel="nofollow"/>
修改为:
<img src="/a/2406248/{$picture.img_url}" rel="nofollow"/>
OK!

本文标签:

很赞哦! ()

相关源码

  • (自适应)帝国cms7.5模板新闻资讯门户带会员中心基于帝国CMS7.5内核开发的HTML5响应式模板,为新闻机构、媒体门户及资讯聚合平台设计。通过模块化布局实现图文混排查看源码
  • WordPress主题模板JustNews资讯博客类源码V5.2.2JustNews主题针对博客创作、自媒体运营及资讯发布类网站的需求而设计,提供专业的内容展示与管理方案。该主题集成前端用户中心功能,支持用户在前端界面发布和投稿文章,操作流程简洁高效。查看源码
  • 帝国cms题库问答学习平台模板知识付费网站源码+数据采集为教育机构、培训平台及在线学习场景设计,提供完整的题库管理与问答服务解决方案。支持多种题型展示与答案查询,满足不同层次的学习需求。查看源码
  • (自适应)APP应用软件落地页单页推广页网站模板下载基于PbootCMS内核开发的响应式单页模板,为企业产品展示、服务推广等应用场景设计。通过简洁直观的视觉布局与高效的技术架构,帮助用户快速构建专业级落地页面,实现移动端与PC端数据实时同步展示。查看源码
  • (自适应响应式)WORDwps办公资源教程资讯网站模板下载基于PbootCMS内核开发的响应式网站模板,为办公教程、WPS技巧分享、职场技能培训等场景打造。模板内置标准化文档分类体系,支持图文/视频教程混合展示,满足现代办公知识传播需求。查看源码
  • 帝国cms自适应古诗词古籍名句网站整站带数据基于帝国CMS打造的专业古诗词文化网站模板,专注于古典文学内容的展示与传播。模板设计蕴含传统文化韵味,支持诗词鉴赏、名句赏析、古籍整理等特色功能,为诗词爱好者提供优质的在线阅读体验。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐