Как изменить значение масштабируемого изображения

Я использую повышенные эффекты масштабирования для масштабирования изображения, мой тег изображения:

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

и elevatezoom script:

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

У меня есть много изображений, которые я хочу увеличить, с тем же значением id, src меняется, но я не мог изменить значение масштабируемого изображения. Как изменить значение масштабируемого изображения, вы также можете посетить любой [ e coomerce website], что я пытаюсь сказать. 1

Ответ 1

После изменения атрибута масштабирования данных вам нужно повторно инициализировать с помощью elevateZoom следующим образом:

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

Ответ 2

Если вы хотите изменить изображение, показанное как увеличенное, просто сделайте это

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

Ответ 3

Я думаю, вам нужно это...

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

Ответ 4

У меня была точно такая же проблема, подумал: возможно, это не работает, потому что плагин не поддерживает изменение этого конкретного атрибута - он имеет свои собственные функции галереи. В собственной документации есть ошибки, вот как это работает:

HTML для основного изображения и миниатюр:

<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 для инициализации галереи:

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

плюс любые другие атрибуты, которые вы хотите дать ему

jQuery для передачи изображений в основной контейнер:

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

Я новичок в jQuery, и на самом деле я на самом деле не понимаю 100% здесь механику, но, как я получил ее на работу, я надеюсь, что она сработает для вас!

Ответ 5

Включите следующий код в js, и он может решить вашу проблему В переменной smallImage указывается URL нового маленького изображения и в largeImage дать URL нового большого изображения. Надеюсь, что это решит вашу проблему без повторной настройки вашего увеличенного масштабирования.

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

Ответ 6

вам нужно просто использовать функцию галереи, предоставленную самим плагином, просто оберните ваши изображения в контейнер

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

тогда вы должны вызвать плагин следующим образом:

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

Ответ 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();