Jquery Slimbox和AJAX圖像交換問題

首先我會提到我瀏覽了無數的問題和答案，其中很多問題和答案在邏輯上看起來很有用。Jquery Slimbox和AJAX圖像交換問題

我遇到了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代碼來進行圖像交換。這做一些處理，基本上設置#productmaainImage的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 
    } 
});

我也嘗試在我的頁面插入代碼嘗試類似的事情。

任何人有任何建議嗎？

來源

2011-05-22 mstiner

那麼，我繼續嘗試解決這個問題，並發現我做錯了什麼。 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掉了！

來源

2011-05-22 22:38:41 mstiner

Jquery Slimbox和AJAX圖像交換問題

回答

相關問題