javascript - 产品页面上的 prestashop 下一张和上一张图像按钮

Question

我想在产品页面的产品图片上添加下一个和上一个按钮，以便用户可以使用这些按钮浏览所有图片，就像在 fancybox 中打开图片一样。

如何在 JavaScript 中获取下一张和上一张图像？我确信这很简单，因为所有产品图片都必须被调用并排列，因为我们在产品页面上，我只是不知道如何获取它们。

我在想这样的事情:

function nextImage(){
    document.getElementById('bigpic').src = next image (id?)
}

谢谢!

Answer 1

使用 owl.caroulsel jquery script 可以很好地完成此操作与 foreach 循环 Hook 。

这是插入 product.tpl 文件的代码

 {if isset($images) && count($images) > 0}
        <div class="col-md-12">
            <div id="prod" class="owl-carousel owl-theme">
                {if isset($images)}
                    {foreach from=$images item=image name=thumbnails}
                        <div class="item">
                            {assign var=imageIds value="`$product->id`-`$image.id_image`"}
                            {if !empty($image.legend)}
                                {assign var=imageTitlte value=$image.legend|escape:'htmlall':'UTF-8'}
                            {else}
                                {assign var=imageTitlte value=$product->name|escape:'htmlall':'UTF-8'}
                            {/if}
                                <div id="thumbnail_{$image.id_image}">
                                    <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$imageTitlte}">
                                        <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}" />
                                    </a>
                                </div>
                        </div>
                    {/foreach}
                {/if}
            </div>
        </div>
    {/if} 

这是jquery代码

 $(document).ready(function(){$("#prod").owlCarousel({loop:true,nav:false,autoplay:false,responsive:{0:{items:1,loop:true,nav:false},600:{items:1,loop:true,nav:false},1000:{items:1,nav:true,loop:true}}});});

不要忘记插入 owl.caroulsel.js 和 owl.carousel.css 文件

主要优点 1. react 灵敏 2. 手机上触摸滑动 3.图片仍可放大