Comment changer la valeur data-zoom-image

Je suis à l'aide d'élever les effets de zoom pour la facilité de zoom de l'image, mon image de marque est la suivante:

<img id="zoom_01"
 src='New folder/small/image.jpg'
 data-zoom-image="New folder/large/image.jpg">

et elevatezoom script est:

<script>
    $("#zoom_01").elevateZoom({scrollZoom : true});
</script>

J'ai beaucoup d'images que je veux zoom, avec le même id,src valeur est en train de changer, mais je ne pouvais pas modifier les données-zoom-valeur d'image.Comment modifier les données-zoom-valeur d'image,vous pouvez également visiter l'un [e coomerce site web]que ce que j'essaie de dire.Un

source d'informationauteur Hashir Hussain

  1. 18

    Après le changement de données de zoom de l'image de l'attribut, vous avez besoin de ré-initialiser avec elevateZoom comme ceci:

    $("#zoom_01").data('zoom-image', 'newURL').elevateZoom({
   responsive: true,
   zoomType: "lens", 
   containLensZoom: true
});
  2. 5

    Si vous voulez changer l'image qui le montre comme le zoom, il suffit de faire ce

    $('.zoomWindowContainer div').stop().css("background-image","url("+ changed_image +")");
  3. 2

    Je pense que vous avez besoin de cette...

    $("#zoom_01").attr('data-zoom-image', 'new path');
  4. 0

    J'ai eu exactement le même problème ici, tout compris: il n'a probablement pas de travail parce que le plugin ne prend pas en charge la modification de cet attribut particulier - il a sa propre galerie de la fonctionnalité. Il y a des erreurs dans leur propre documentation, c'est comment cela fonctionne:

    HTML pour principal image & vignettes:

    <img id="bigpic" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>

<div id="gal1">

<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img src="thumb/image1.jpg" />
</a>

<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img src="thumb/image2.jpg" />
</a>

</div>

    jQuery pour l'initialisation de la galerie:

    $("#bigpic").elevateZoom({
gallery:'gal1',
galleryActiveClass: 'active'
    • ainsi que d'autres attributs que vous souhaitez lui donner

    jQuery pour passer les images dans le conteneur principal:

    $("#bigpic").bind("click", function(e) {  
var ez =   $('#bigpic').data('elevateZoom');    
$.fancybox(ez.getGalleryList());
return false;
});

    Je suis nouveau sur jQuery et je n'ai pas vraiment à 100% de comprendre la mécanique, mais c'est la façon dont je l'ai eu à travailler, j'espère que cela fonctionne pour vous!

  5. 0

    Inclure le code suivant dans le js et il peut résoudre votre problème
    Dans la variable smallImage donner l'url de la nouvelle petite image
    et dans largeImage donner l'url de nouvelles images de grande taille.
    Espérons que cela résout votre problème sans reintializing élever votre zoom.

    var ez = $("#zoom_01").data("elevateZoom");
ez.swaptheimage(smallImage, largeImage);
  6. 0

    vous avez juste à utiliser la galerie de la fonctionnalité fournie par le plugin lui-même, juste envelopper vos images dans un récipient 

    <img src="img1-small.jpg" id="zoom_x" data-zoom-image="img1-large.jpg">
<div id="my_images">
<a href="#" data-image="img1-small.jpg" data-zoom-image="img1-large.jpg"><img src="img1-small.jpg" alt=""></a>
<a href="#" data-image="img2-small.jpg" data-zoom-image="img2-large.jpg"><img src="img2-small.jpg" alt=""></a>
...
</div>

    ensuite, vous devez appeler le plugin comme ceci:

    $("#zoom_x").elevateZoom({ gallery: "my_images", zoomType   : "inner", cursor: "crosshair", imageCrossfade: true });
  7. 0
    var zoomElement = $('#zoom_01');

//destroy old one
zoomElement.removeData('zoom-image');
$('.zoomContainer').remove();

//set new one
zoomElement.attr('data-zoom-image', image_large_size);
zoomElement.attr('src', image_normal_size);

//reinitial elevatezoom
zoomElement.elevateZoom();