Блог

Сначала я упомяну, что я просмотрел бесчисленное количество вопросов и ответов, многие из которых, казалось бы, логически работают.

У меня возникла проблема с slimbox и AJAX. Я выполняю простую замену изображений, и когда я это сделаю, slimbox не будет работать для вновь добавленного изображения.

Я перепробовал много вещей, начиная с вызова Live Query (дополнение jquery) и заканчивая простой попыткой повторной привязки или повторного вызова slimbox.

Будем признательны за любую помощь или предложения. Возможно, включение моего точного сценария в контекст поможет связать одно из уже существующих решений для решения моей проблемы. До сих пор я не смог их включить.

Шаг 1: У меня есть php-код, генерирующий мою страницу с основным изображением, для которого slimbox отлично работает:

 <div id="productMainImage" class="centeredContent back">
    <a href="images/large/redwhiteandyou_LRG.jpg" rel="lightbox-g" title="Red White and You"><img src="images/medium/redwhiteandyou_MED.jpg" alt="Red White and You" title=" Red White and You " width="250" height="167"><br><span class="imgLink">larger image</span></a>
</div>
  

Шаг 2: У меня создан набор изображений атрибутов, в котором я вызываю свой ajax-код для выполнения замены изображений. Это выполняет некоторую обработку и в основном устанавливает innerhtml #productMainImage следующим образом:

 <div id="productMainImage" class="centeredContent back">
    <a id="Yellow" href="images/large/attributes/redwhiteandyou_yellow_LRG.jpg" rel="lightbox-g" title="Yellow"><img src="images/medium/attributes/redwhiteandyou_yellow_MED.jpg" alt="Yellow" title=" Yellow " width="250" height="167"><br><span class="imgLink">larger image</span></a>
</div>
  

Обмен работает нормально, и изображение меняется. Большой вопрос в том, как я могу убедиться, что это изображение связано с slimbox.

Я попробовал несколько вещей (не ограничиваясь ими!):

Вставка javascript в код, вызываемый ajax для записи html:

 $(document).ready(function() {
    $('#content').find("a[rel^='lightbox']").slimbox({}, null, function(el) {
        return (this == el) || ((this.rel.length > 8) amp;amp; (this.rel == el.rel));
    });
});
  

или

 $("a[rel^='lightbox']").livequery(function(){
    $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
    return (this == el) || ((this.rel.length > 8) amp;amp; (this.rel == el.rel));
    }), function() {
        //remove slimbox? this is called when elements no longer match
    }
});
  

Я также пытался вставить код на свою страницу, пытаясь выполнить аналогичные действия.

У кого-нибудь есть какие-либо предложения?

Что ж, я продолжал пытаться решить эту проблему и обнаружил, что я делал неправильно. Основное недопонимание в потоке того, как AJAX обновлял страницу. Я подключил вызов slimbox к следующей функции в коде AJAX, и теперь он работает!

 function stateChanged() { 
  if (xmlHttp.readyState==4){    
    var product_color_image=xmlHttp.responseText;
    if(product_color_image!=''){
    document.getElementById('productMainImage').innerHTML = product_color_image;
    }
    $("a[rel^='lightbox']").slimbox({
      <?php require_once(DIR_FS_CATALOG . DIR_WS_CLASSES . 'zen_lightbox/options.php'); ?>
    }, function(el){
      return [el.href, el.title /*   '<br /><a href="'   el.href   '">Download this image</a>'*/];
       }, function(el) {
            return (this == el) || ((this.rel.length > 8) amp;amp; (this.rel == el.rel));
          }), function() {
                //remove slimbox? this is called when elements no longer match
              }
    }
}
  

Мне нужно проработать несколько более тонких деталей, но, по крайней мере, теперь мои изображения отображаются в лайтбоксе после того, как я выполнил AJAX-замену основного изображения продукта!