Pokaż drugie zdjęcie produktu po najechaniu myszką
16/02/2022 19:54:56
Komentarze
0

Jeśli chcesz aby w miniaturkach produktów było pokazywane drugie zdjęcie to ten poradnik pokaże Ci krok po kroku przez jak dokonać takiej modyfikacji
#products .thumbnail-container img.img_2,
.featured-products .thumbnail-container img.img_2 {
position: absolute;
transform: rotateY(180deg);
transition: .5s;
z-index: -1;
}
#products .thumbnail-container:hover img.img_2,
.featured-products .thumbnail-container:hover img.img_2 {
z-index: 1;
transform: rotateY(0deg);
}
{block name='product_thumbnail'}
{if $product.cover}
<a href="{$product.url}" class="thumbnail product-thumbnail">
{assign var='productimg' value=Image::getImages($language.id, $product.id)}
{if isset($productimg[0]) && isset($productimg[1])}
<img
src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[0].id_image, 'home_default')}"
alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
loading="lazy"
data-full-size-image-url="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[0].id_image, 'large_default')}"
width="250"
height="250"
/>
<img
class="img_2"
src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[1].id_image, 'home_default')}"
alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
loading="lazy"
data-full-size-image-url="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[1].id_image, 'large_default')}"
width="250"
height="250"
/>
{else}
<img
src="{$product.cover.bySize.home_default.url}"
alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
loading="lazy"
data-full-size-image-url="{$product.cover.large.url}"
width="250"
height="250"
/>
{/if}
</a>
{else}
<a href="{$product.url}" class="thumbnail product-thumbnail">
<img
src="{$urls.no_picture_image.bySize.home_default.url}"
loading="lazy"
width="250"
height="250"
/>
</a>
{/if}
{/block}
Zostaw komentarz Anuluj komentarz