У меня есть два изображения, которые я переключаю, и масштабирование этих изображений должно отображаться в соответствии с выбранным изображением. При загрузке первой страницы все работает нормально (появляется изображение, появляется изображение). После того, как я нажму на изображение, изображение обменивается и масштабирование отлично работает. Однако, если я снова нажму, я получаю изображение правильно, но изображение масштабирования не обновляется даже для дальнейших щелчков (продолжайте отображать масштабирование для второго загруженного изображения). Я пытаюсь изменить атрибуты data-zoom-image, но не повезло. Какие-либо предложения?
function pageLoad(sender, args) {
zooming();
}
function chngimg(x) {
if ($("#zoom_mw").attr("src") == x) {
var rimage;
rimage = $("#zoom_mw").attr('rearimage');
$("#zoom_mw").attr("src", rimage);
$("#zoom_mw").removeAttr("data-zoom-image");
$("#zoom_mw").attr("data-zoom-image", rimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
} else {
var fimage;
fimage = $("#zoom_mw").attr('frontimage');
$("#zoom_mw").attr("src", fimage);
$("#zoom_mw").attr("data-zoom-image", fimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
}
}
<img style="border:1px solid #e8e8e6;" id="zoom_mw"
onclick="chngimg('<%= Session("ImagePathFront")%>')"
frontimage='<%= Session("ImagePathFront")%>'
rearimage='<%= Session("ImagePathRear")%>'
src='<%= Session("ImagePathFront")%>'
width="500" height="250" />
Я предполагаю, что вы используете эту библиотеку. Это так?
В моем демо я скопировал ваш код и в настоящее время
pageLoad()
вызывает функцию zooming()
но код, который вы предоставили, не выполняет pageLoad, а функция масштабирования() отсутствует.elevateZoom
для меня не работает. Вам не хватает ссылки?Если вы используете elevateZoom, вам нужно указать URL для большего изображения
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
Их exsample Gallery & Lightbox мне кажется, что он близок к тому, что вы ищете:
<img id="img_01" 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 id="img_01" src="thumb/image1.jpg" />
</a>
<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img id="img_01" src="thumb/image2.jpg" />
</a>
</div>
И соответствующий javascript
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01',
cursor: 'pointer', galleryActiveClass: 'active'
, imageCrossfade: true
, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
Пожалуйста, задайте дополнительные вопросы или комментарии, если я вас неправильно понял.
zooming();
а pageLoad(sender, args)
относится к вашей проблеме? Если у вас есть два небольших изображения A и B (как в моем примере), каждое нажатие на элемент <img id="zoom_mw" .../>
должно переключать изображение (с a на b) и загружать соответствующее большое изображение (b_big). и a_big) - это правильно? Изображения всегда совпадают (small_a -> big_a, small_b -> big_b)?