Jquery Slimbox 和 AJAX 图像交换问题答案

【问题标题】：Jquery Slimbox and AJAX Image Swapping IssueJquery Slimbox 和 AJAX 图像交换问题
【发布时间】：2011-05-22 12:13:16
【问题描述】：

首先我要提一下，我浏览了无数的问题和答案，其中许多在逻辑上似乎可行。

我遇到了有关 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 代码来进行图像交换。这做了一些处理，基本上将#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
    }
});

我也尝试在我的页面中插入代码尝试类似的事情。

有人有什么建议吗？

【问题讨论】：

标签： jquery ajax lightbox livequery slimbox

【解决方案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 交换后，我的图像会显示在灯箱中！

【讨论】：