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产品页面上的下一个和上一个图像按钮

1 个答案: