web-dev-qa-db-fra.com

Comment changer la valeur de data-zoom-image

J'utilise des effets d'élévation de zoom pour zoomer sur une image, mon tag d'image est:

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

et le script elevatezoom est:

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

J'ai beaucoup d'images que je veux zoomer, avec le même identifiant, la valeur src change mais je ne pouvais pas changer la valeur data-zoom-image.Comment changer la valeur data-zoom-image, vous pouvez également visiter n'importe quel site de e-commerce ] que ce que j'essaie de dire. 1

javascriptjqueryhtmlimage
12
Hashir Hussain

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

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

Si vous souhaitez modifier l’image affichée comme agrandie, procédez comme suit.

$('.zoomWindowContainer div').stop().css("background-image","url("+ changed_image +")");
6
Malkhaz Gholijashvili

Je pense que tu as besoin de ça ...

$("#zoom_01").attr('data-zoom-image', 'new path');
2
Naveed Butt
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();
0
Hossein Haji Mali

J'avais exactement le même problème ici, compris: cela ne fonctionne probablement pas car le plugin ne prend pas en charge la modification de cet attribut particulier - il a sa propre fonctionnalité de galerie. Il y a des erreurs dans leur propre documentation, voici comment cela fonctionne:

HTML pour l'image principale et les 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 initialiser la galerie:

$("#bigpic").elevateZoom({
gallery:'gal1',
galleryActiveClass: 'active'
  • plus quels que soient les autres attributs que vous voulez lui donner

jQuery pour transmettre les images au conteneur principal:

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

Je suis nouveau dans jQuery et je ne comprends pas vraiment à 100% les mécanismes, mais c'est comme ça que je l'ai fait fonctionner, j'espère que cela fonctionne pour vous!

0
mompou

il vous suffit d'utiliser la fonctionnalité de galerie fournie par le plugin lui-même, il vous suffit d'envelopper vos images dans un conteneur 

<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>

alors vous devez appeler le plugin comme ceci:

$("#zoom_x").elevateZoom({ gallery: "my_images", zoomType   : "inner", cursor: "crosshair", imageCrossfade: true });
0
nizarb

Incluez le code suivant dans js et cela peut résoudre votre problème Dans variable smallImage, indiquez l’URL de la nouvelle petite image et en largeImage, l’URL de la nouvelle grande image. Espoir cela résout votre problème sans avoir à reintialiser votre zoom élévé.

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