Come modificare il valore di zoom-data-immagine

Question

sto usando elevare effetti di zoom per lo zoom facilità di immagine, la mia tag immagine è:

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

e sceneggiatura elevatezoom è:

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

I ho molte immagini che voglio ingrandire, con lo stesso id, il valore src sta cambiando, ma non ho potuto cambiare il valore di zoom-immagine-dati. Come faccio a cambiare il valore di zoom-immagine-dati, puoi anche visitare qualsiasi [e sito web di coomerce] quello che sto cercando di dire. 1

Answer 1

Dopo il cambio di attributo zoom data-immagine, è necessario ri-inizializzare elevateZoom come questo:

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

Answer 2

Penso che avete bisogno di questo ...

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

Answer 3

ho avuto esattamente lo stesso problema qui, capito: probabilmente non funziona perché il plugin non supporta la modifica che particolare attributo - ha le sue funzionalità di galleria. Ci sono errori nella propria documentazione, questo è come funziona:

HTML per i principali immagine & miniature:

<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 per l'inizializzazione della galleria:

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

• più qualunque altra attributi che vuoi dargli

jQuery per il passaggio delle immagini per il contenitore principale:

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

Sono nuovo di jQuery e non ho davvero al 100% capire i meccanismi qui, ma è così che ho preso a lavorare, spero che funziona per te!

Answer 4

Se si desidera cambiare l'immagine che mostrata come zoom, è sufficiente fare questo

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

Answer 5

Incluse il seguente codice in js e potrebbe risolvere il problema In variabile smallImage date l'url della nuova piccola immagine e in largeImage date l'url di nuova grande immagine. Spero che questo risolva il tuo problema senza reintializzare lo zoom elevato.

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

Answer 6

devi solo utilizzare la funzione di galleria fornita dal plugin stesso, basta avvolgere le vostre immagini in un contenitore

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

poi si deve chiamare il plugin in questo modo:

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