Невозможно повторно изменить значение атрибута Javascript

0

У меня есть два изображения, которые я переключаю, и масштабирование этих изображений должно отображаться в соответствии с выбранным изображением. При загрузке первой страницы все работает нормально (появляется изображение, появляется изображение). После того, как я нажму на изображение, изображение обменивается и масштабирование отлично работает. Однако, если я снова нажму, я получаю изображение правильно, но изображение масштабирования не обновляется даже для дальнейших щелчков (продолжайте отображать масштабирование для второго загруженного изображения). Я пытаюсь изменить атрибуты 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"  />
  • 0
    Не могли бы вы проверить, предоставили ли вы все соответствующие части кода и библиотек, которые вы можете использовать.
  • 0
    Меняется ли сессия динамически? Я предполагаю, что это остается тем же самым или вы манипулируете клиентской частью контента Session из javascript?
Теги:

1 ответ

0
Лучший ответ

Я предполагаю, что вы используете эту библиотеку. Это так?

В моем демо я скопировал ваш код и в настоящее время

  • он переключает изображения.
  • Ваша функция 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;
});

Пожалуйста, задайте дополнительные вопросы или комментарии, если я вас неправильно понял.

  • 0
    Да, я использую эту библиотеку: elevateweb.co.uk/image-zoom Моя версия не будет работать на странице, потому что она загружает пути к изображениям из сессий. Я передаю «большое» изображение динамически, добавляя его в качестве атрибута при каждом переключении.
  • 0
    В какую цель (элемент) вы хотите поместить большое изображение? Являются ли функции zooming(); а pageLoad(sender, args) относится к вашей проблеме? Если у вас есть два небольших изображения A и B (как в моем примере), каждое нажатие на элемент <img id="zoom_mw" .../> должно переключать изображение (с a на b) и загружать соответствующее большое изображение (b_big). и a_big) - это правильно? Изображения всегда совпадают (small_a -> big_a, small_b -> big_b)?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню