So ändern Sie data-zoom-image-Wert

Ich bin mit elevate zoom-Effekte zum Zoomen Anlage von Bild, 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:

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

Habe ich viele Bilder, die will ich vergrößern, mit der gleichen id,src-Wert verändert, aber ich konnte es nicht ändern, data-zoom-image-Wert.Wie kann change data-zoom-image-Wert,können Sie auch besuchen [e coomerce website], dass das, was ich versuche zu sagen.Eins

InformationsquelleAutor Hashir Hussain | 2013-10-01

18

Nach der änderung des data-zoom-image Attribut, müssen Sie re-initialisieren mit elevateZoom wie diese:
```
$("#zoom_01").data('zoom-image', 'newURL').elevateZoom({
   responsive: true,
   zoomType: "lens", 
   containLensZoom: true
}); 
```
Ich weiß, das ist alt, aber ich wollte, dass du weißt, dass dies ein Geschenk des Himmels. Dank einer Tonne.

InformationsquelleAutor Zoran Majstorovic
5

Wenn Sie möchten, ändern Bild, das angezeigt gezoomt ist, einfach das zu tun diese
```
$('.zoomWindowContainer div').stop().css("background-image","url("+ changed_image +")");
```
Thx, das ist es, was ich war auf der Suche nach dem ändern der Bildposition mit elevateZoom plugin nach dem ändern der Zoom-Miniaturansicht.

InformationsquelleAutor Malkhaz Gholijashvili
2

Ich glaube, Sie brauchen das...
```
$("#zoom_01").attr('data-zoom-image', 'new path');
```
Es funktioniert nicht... data-zoom-image ist nicht von der tatsächlichen Attribut im img-tag.Ich heruntergeladen erheben zoom.
Bitte jemand helfen so schnell wie möglich, es ist dringend.... vielen Dank im Voraus..
auch wenn es nicht original ist Attribut. Es sollte funktionieren. Bitte teilen Sie einige code, wo Sie versuchen, ändern Sie den tag und die src des Bildes
Ich habe drei kleine Bilder als thumbnails und ein großes Bild... das ist eines der kleinen Bild <img src="Neuen folder/images/simage.JPG" data-zoom-image="Neue folder/images/bimage.JPG" />.Ich möchte das ändern Big-image-data-zoom-image-Wert mit kleinen image-data-zoom-image
diese Funktion wird aufgerufen, auf onClick des kleinen image-tag, Funktion changeImg(src,id) { document.getElementById(id).src=src; $(id).attr('data-zoom-image',src); }

InformationsquelleAutor Naveed Butt
0

Ich hatte genau das gleiche problem hier, es herausgefunden: es wahrscheinlich nicht funktionieren, da das plugin nicht ändern, dass die Besondere Eigenschaft - es hat seine eigene Galerie-Funktionalität. Es sind Fehler in Ihre eigene Dokumentation, dies ist, wie es funktioniert:

HTML-Code für Haupt-Bild & miniaturen:
```
<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'
```
- plus was auch immer andere Attribute, die Sie möchten, um es zu geben
jQuery für die Weitergabe der Bilder an den umgebenden container:
```
$("#bigpic").bind("click", function(e) {  
var ez =   $('#bigpic').data('elevateZoom');    
$.fancybox(ez.getGalleryList());
return false;
});
```
Ich bin neu bei jQuery und ich nicht wirklich zu 100% verstehen, die mechanik hier, aber das ist, wie ich es geschafft habe, ich hoffe, es funktioniert für Sie!

InformationsquelleAutor mompou
0

Gehören die folgenden code in js, und es kann Ihr problem lösen
In der variable smallImage geben Sie die url der neuen kleinen Bild
und in largeImage geben Sie die url der neuen großen Bild.
Hoffe, das löst dein problem ohne reintializing Ihre erheben zoom.
```
var ez = $("#zoom_01").data("elevateZoom");
ez.swaptheimage(smallImage, largeImage);
```
InformationsquelleAutor Priya Gupta

müssen Sie nur verwenden Sie die gallery-Funktion, sofern durch das plugin selbst, nur wickeln Sie Ihre Bilder in einen container

<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 rufen Sie das plugin wie dieses:

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

InformationsquelleAutor nizarb

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

InformationsquelleAutor Hossein Haji Mali

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.