ECshop商品相册显示顺序为正序实现方法

在ECshop中,商品相册图片的显示顺序默认是按文件名的字母顺序排列的。如果想要实现正序显示,可以按以下步骤操作:

1. 打开模板文件/templates/index.html,找到商品相册的位置,如:

{if $goods_gallery}
<p id="gallery" class="qs_gallery"> 
    <!--相册图片--> 
    {loop $goods_gallery $key $value}
    <a href="{$value.img_url}" target="_blank">
        <img src="{$value.img_url}" width="{$value.width}" height="{$value.height}" alt="{$value.img_desc}" class="img-thumbnail">
    </a> 
    {/loop} 
</p>
{/if}

2. 在图片<img>标签前加上一个变量用于表示图片顺序,如:

 
{loop $goods_gallery $key $value}
<a href="{$value.img_url}" target="_blank">
<span class="num">{$key}</span>     <!--图片顺序-->
    <img src="{$value.img_url}" width="{$value.width}" height="{$value.height}" alt="{$value.img_desc}" class="img-thumbnail">
</a>  
{/loop}

3. 打开模板文件/templates/library/page_footer.html,在</body>标签前添加如下JS代码:

<script>
$(document).ready(function(){
    var gallery = $("#gallery");
    var links = gallery.find("a");
    var nums = gallery.find("span.num");

    links.sort(function(a, b){
        var numA = parseInt($(a).find("span.num").text());
        var numB = parseInt($(b).find("span.num").text());
        return numA - numB; 
    });

    for(var i = 0; i < links.length; i++) {
        $(nums[i]).text(i+1);
        gallery.append(links[i]);
    }
});  
</script>

4. 该JS代码的作用是:- 找到商品相册和其中的链接与图片顺序表示

– 根据图片顺序从小到大排序链接

– 更新图片顺序表示,改为从1开始的正序

– 按新顺序追加链接到商品相册中

5. 保存模板修改,刷新商品详情页面,商品相册的图片显示顺序即为正序。

以上就是在ECshop中实现商品相册图片正序显示的方法。