Wie Daten-Zoom-Bildwert ändern

Question

Ich verwende für Zoom-Effekte erhöhen Einrichtung von Bild Zoomen, mein Bild-Tag ist:

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

und elevatezoom Skript ist:

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

I habe viele Bilder, die ich zoomen möchte, mit derselben ID, src Wert ändert sich, aber ich konnte nicht ändern Daten-Zoom-Bild Wert.Wie ändern Daten-Zoom-Bild-Wert, können Sie auch besuchen Sie jede [e coomerce Website] das, was ich versuche zu erzählen. 1

Answer 1

Nach Änderung der Daten Zoom-Bild-Attribut, müssen Sie mit elevateZoom wie folgt neu initialisieren:

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

Answer 2

Ich glaube, Sie brauchen diese ...

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

Answer 3

Ich habe genau das gleiche Problem hier, es herausgefunden: es wahrscheinlich nicht funktioniert, weil das Plugin nicht unterstützt, dass bestimmte Attribute zu ändern - Es hat seine eigene Galerie Funktionalität. Es gibt Fehler in der eigenen Dokumentation, das ist, wie es funktioniert:

HTML für Hauptbild & Thumbnails:

<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 für die Initialisierung der Galerie:

$("#bigpic").elevateZoom({ 
gallery:'gal1', 
galleryActiveClass: 'active' 

• und was auch immer andere Attribute, die Sie geben möchten

jQuery für die Bilder auf den Hauptbehälter vorbei:

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

Ich bin neu in jQuery und ich weiß nicht wirklich 100% der Mechanik hier verstehen, aber das ist, wie ich es bekommen habe, zu arbeiten, ich hoffe, es funktioniert für dich!

Answer 4

Wenn Sie das Bild wechseln, die als gezoomt gezeigt, dies einfach tun

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

Answer 5

Enthalten Sie den folgenden Code in js und es kann Ihr Problem lösen In Variable smallImage geben Sie die URL des neuen kleinen Bildes und in largeImage geben Sie die URL des neuen großen Bildes. Hoffen, dass dies Ihr Problem löst, ohne Ihren vergrößerten Zoom neu zu initialisieren.

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

Answer 6

Sie haben gerade die Galerie-Funktion vom Plugin selbst nutzen Sie einfach Ihre Bilder in einen Behälter wickeln

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

dann müssen Sie das Plugin wie folgt aufrufen:

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

Answer 7

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();