prestashop 产品页面上的下一个和上一个图像按钮

Question

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

如何获取 javascript 中的下一张和上一张图片？我相信这很简单，因为我们在产品页面上，所以必须调用和安排所有产品图片，我只是不知道如何获取它们。

我在想这样的事情：

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

谢谢！

Answer 1

可以很好地完成 owl.caroulsel jquery script 挂钩 foreach 循环。

这是要插入到 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.反应灵敏 2.在手机上触摸滑动 3.图片还可以放大

prestashop 产品页面上的下一个和上一个图像按钮

prestashop next and previous image buttons on product page

javascript

jquery

prestashop

prestashop-1.5