theme-elegance/templates/catalog/_partials/product-cover-thumbnails.tpl

59 lines
2.3 KiB
Smarty

{**
* 2007-2019 PrestaShop and Contributors
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* https://opensource.org/licenses/AFL-3.0
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to https://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2019 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
<div class="images-container flex w-full flex-row-reverse justify-center gap-6 flex-wrap lg:flex-nowrap">
<div>
{block name='product_cover'}
<div class="product-cover w-full easyzoom easyzoom--overlay is-ready">
<a id="easyzoom-large-img-anchor" href="{$product.cover.bySize.large_default.url}">
<img class="js-qv-product-cover w-full bg-gray-100" src="{$product.cover.bySize.medium_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" itemprop="image">
</a>
</div>
{/block}
</div>
{block name='product_images'}
<div class="js-qv-mask mask" >
<ul class="product-images js-qv-product-images flex flex-row lg:flex-col gap-6 w-full h-auto">
{foreach from=$product.images item=image}
<li class="thumb-container w-14 md:w-24">
<img
class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
data-image-medium-src="{$image.bySize.medium_default.url}"
data-image-large-src="{$image.bySize.large_default.url}"
src="{$image.bySize.home_default.url}"
alt="{$image.legend}"
title="{$image.legend}"
itemprop="image"
>
</li>
{/foreach}
</ul>
</div>
{/block}
</div>
{hook h='displayAfterProductThumbs'}