您现在的位置是:首页 >>CxCmsCxCms

产品详情页多图调用

zhang2020-12-17 12:02:57【CxCms】人已围观

简介:
产品详情页多图调用实现同一个产品可以有多张图来展示效果。代码:这里contentid=[id],这里的[id]原来是[content:id],系统升级后...

产品详情页多图调用实现同一个产品可以有多张图来展示效果。
代码:
这里contentid=[id],这里的[id]原来是[content:id],系统升级后内容详情页去掉了content前缀。

{cxcms:cimages count=5 contentid=[id]}
<li{if:[cimages:i]=1} class='first'{end if}><span class="pic"><img class='cloudzoom-gallery' src="[cimages:src]" data-cloudzoom ="useZoom:'.cloudzoom', image:'[cimages:src]' "></span></li>
{/cxcms:cimages}

演示代码:
<div class="proi-right">
<div class="clearfix">
<div class="pir-left">
{cxcms:cimages count=1 contentid=[id]}
<div id="preview" class="spec-preview">
<span class="jqzoom">
<img jqimg="[cimages:src]" src="[cimages:src]" alt="">
</span>
</div>
{/cxcms:cimages}

<!--缩图开始-->
<div class="spec-scroll">
<a class="prev iconfont icon-left"></a>
<div class="items">
<ul id="itemsUl">
{cxcms:cimages count=5 contentid=[id]}
<li {if:[cimages:i]=1}class="hover"{end if}>
<img alt="" bimg="[cimages:src]" src="[cimages:src]" onmousemove="preview(this);">
</li>
{/cxcms:cimages}
</ul>
</div>
<a class="next iconfont icon-right"></a>
</div>
</div>

<div class="pir-swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
{cxcms:cimages count=1 contentid=[id]}
<div class="pir-pic"><img src="[cimages:src]" alt="" /></div>
{/cxcms:cimages}
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>

注释:鼠标放上去上下对应,上面只调用一个,多图缩略处数量可以调用多个。


效果图展示:


文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:88篇文章
  • 微信公众号:扫描二维码,关注我
在线客服
在线咨询:
点击这里给我发消息技术支持
点击这里给我发消息技术支持
点击这里给我发消息技术支持
点击这里给我发消息技术支持
电话咨询:
电话咨询
156-2913-6039