Jak zmienić wartość danych zoom-image

Question

Używam podnieść efekty zoomu do powiększania centrum obrazu, obraz jest mój tag:

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

i skrypt elevatezoom jest:

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

I Mam wiele zdjęć, które chcę powiększyć, z tym samym identyfikatorem, wartość src się zmienia, ale nie mogłem zmienić wartości zoomu danych. Jak zmienić wartość zoomu danych obrazu, możesz również odwiedzić dowolną [stronę coomerce] to, co próbuję powiedzieć. 1

Answer 1

Po zmianie atrybutu danych powiększenia obrazu, należy ponownie zainicjować z elevateZoom jak ten:

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

Answer 2

myślę, że trzeba to ...

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

Answer 3

miałem dokładnie ten sam problem tutaj, zorientowaliśmy się: to prawdopodobnie nie działa, ponieważ wtyczka nie umożliwia zmiany tego konkretnego atrybutu - ma własną funkcję galerii. Są błędy w ich własnej dokumentacji, to jak to działa:

HTML dla głównych obraz & miniaturki:

<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 dla inicjowania galerię:

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

• plusa cokolwiek innego atrybuty, które chcesz nadać

jQuery do przekazywania obrazów do głównego zbiornika:

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

Jestem nowy jQuery i tak naprawdę nie 100% zrozumieć mechanikę tutaj, ale to jak mam go do pracy, mam nadzieję, że to działa dla Ciebie!

Answer 4

Jeśli chcesz zmienić obraz, który pokazano jako powiększony, po prostu zrobić to

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

Answer 5

Dołącz następujący kod w js i może on rozwiązać problem W zmiennej smallImage podaj adres URL nowego małego obrazu , a w largeImage podaj adres URL nowego dużego obrazu. Mam nadzieję, że to rozwiąże Twój problem bez ponownego dodawania powiększenia z podniesionym poziomem.

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

Answer 6

trzeba po prostu użyć funkcji galerii dostarczone przez samą wtyczkę, wystarczy owinąć swoje obrazy do pojemnika

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

potem trzeba nazwać wtyczkę takiego:

$("#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();