Bonjour la communauté,
j'ai intégré Jquery zoom sur la page produit.
Celui-ci fonctionne sur la première photo produit page chargée.
Mais dès que je clique sur une vignette pour choisir un autre modèle.
La photo du modèle choisi ce charge bien en remplacement de la première.
Je récupère l'url de l'image large au même endroit dans un data,
mais visiblement elle n'est pas récupérée.
Le code dans thelia.js
$(document).on('click.product-image', '#enlarger', function () {
var imageLarge = $('.product-image > span img').data('image-large'); //récupère l'url de l'image large
$('.product-image > span.zoom').zoom({url: imageLarge});
});
// Product details Thumbnails
$(document).on('click.thumbnails', '#product-thumbnails .thumbnail', function () {
if ($(this).hasClass('active')) { return false; }
$('.product-image > span.zoom').trigger('zoom.destroy'); // enlève le zoom
var $productGallery = $(this).closest("#product-gallery");
/** Le contenu du data n'est pas récupéré ni par attr, ni par data est n'est pas envoyé*/
//$('.product-image > span img', $productGallery).data('image-large',$(this).data('large-image'));
$('.product-image > span img', $productGallery).attr('data-image-large',$(this).attr('data-large-image'));
/** Ici le contenu de href de la vignette est bien envoyé*/
$('.product-image > span img', $productGallery).attr('src',$(this).attr('href'));
/** Ces deux données sont sur le même tag pourtant???*/
$('.thumbnail', $productGallery).removeClass('active');
$(this).addClass('active');
return false;
});
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
La page product.html
<section id="product-gallery" class="col-sm-6">
{ifloop rel="image.main"}
<figure class="product-image">
<span id="enlarger" class="zoom">
{loop type="image" name="image.main" product={$ID} width="560" height="445" resize_mode="borders" limit="1"}
<img src="{$IMAGE_URL nofilter}" alt="{$TITLE}" class="img-responsive" itemprop="image" data-image-large="{$ORIGINAL_IMAGE_URL nofilter}" data-toggle="magnify">
{/loop}
</span>
</figure>
{/ifloop}
{ifloop rel="image.carousel"}
<div id="product-thumbnails" class="carousel slide" style="position:relative;">
<div class="carousel-inner">
<div class="item active">
<ul class="list-inline">
{loop name="image.carousel" type="image" product={$ID} width="560" height="445" resize_mode="borders" limit="5"}
<li>
<a href="{$IMAGE_URL nofilter}" class="thumbnail {if $LOOP_COUNT == 1}active{/if}">
{loop type="image" name="image.thumbs" id={$ID} product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
<img src="{$IMAGE_URL nofilter}" alt="{$TITLE}" data-large-image="{$ORIGINAL_IMAGE_URL nofilter}">
{/loop}
</a>
</li>
{/loop}
</ul>
</div>
{ifloop rel="image.carouselsup"}
<div class="item">
<ul class="list-inline">
{loop name="image.carouselsup" type="image" product={$ID} width="560" height="445" resize_mode="borders" offset="5"}
<li>
<a href="{$IMAGE_URL nofilter}" class="thumbnail">
{loop type="image" name="image.thumbssup" id={$ID} product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
<img src="{$IMAGE_URL nofilter}" alt="{$TITLE}" data-large-image="{$ORIGINAL_IMAGE_URL nofilter}">
{/loop}
</a>
</li>
{/loop}
</ul>
</div>
{/ifloop}
</div>
{ifloop rel="image.carouselsup"}
<a class="left carousel-control" href="#product-thumbnails" data-slide="prev"><i class="fa fa-caret-left"></i></a>
<a class="right carousel-control" href="#product-thumbnails" data-slide="next"><i class="fa fa-caret-right"></i></a>
{/ifloop}
</div>
{/ifloop}
</section>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Le code thelia.js
Last edited by fredodefrance (10-05-2017 13:57:21)