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图像交换问题

回答

相关问题