jQuery Slimbox和AJAX圖像交換問題

Question

首先，我要提到的是，我瀏覽了無數的問題和答案，從邏輯上講，許多問題和答案似乎可行。

我在slimbox和AJAX方面遇到問題。 我正在執行簡單的圖像交換，當我這樣做時，slimbox將不適用於新添加的圖像。

我嘗試了很多事情，從調用實時查詢（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代碼進行圖像交換。 這會進行一些處理，並且基本上將#productMainImage的innerhtml設置如下：

<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鏈接起來。

我嘗試過的幾件事是（不限於！）：

在ajax調用的代碼中插入javascript以寫出html：

$(document).ready(function() {
    $('#content').find("a[rel^='lightbox']").slimbox({}, null, function(el) {
        return (this == el) || ((this.rel.length > 8) && (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) && (this.rel == el.rel));
    }), function() {
        //remove slimbox? this is called when elements no longer match
    }
});

我也嘗試過在網頁中插入代碼以嘗試類似的操作。

有人有什么建議嗎？

Answer 1

好吧，我繼續嘗試解決這個問題，發現我做錯了什么。 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交換之后，至少現在我的圖像正在與燈箱一起顯示！