Jquery Slimbox и проблема обмена изображениями AJAX - PullRequest
Новая
       38

Jquery Slimbox и проблема обмена изображениями AJAX

0 голосов
/ 22 мая 2011

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

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

Я пробовал много вещей от запуска Live Query (jquery addon) до простой попытки перепривязать или снова вызвать 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) && (this.rel == el.rel));
    });
});

OR 

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

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

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

1 Ответ

0 голосов
/ 23 мая 2011

Ну, я продолжал пытаться решить эту проблему и обнаружил, что я делаю неправильно.Основное недоразумение в том, как 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) && (this.rel == el.rel));
          }), function() {
                //remove slimbox? this is called when elements no longer match
              }
    }
}

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

...