0

最初に、私が無数の質問と回答を閲覧したことを述べますが、それらの多くは論理的には機能しているように見えます。

SlimboxとAJAXに問題があります。単純な画像交換を実行していますが、実行すると、新しく追加された画像に対してスリムボックスが機能しません。

Live Query（jqueryアドオン）を呼び出すことから、単に再バインドするか、slimboxを再度呼び出すことまで、多くのことを試しました。

どんな助けや提案も大歓迎です。たぶん、私の正確なシナリオをコンテキストに入れることは、私の問題を解決するためにすでにそこにある解決策の1つを関連付けるのに役立つでしょう。私は今のところそれらを組み込むことができませんでした。

ステップ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>

スワップは正常に機能し、イメージが変化します。大きな問題は、どうすればその画像をスリムボックスにリンクできるかということです。

私が試したことのいくつかは（に限定されません！）：

htmlを書き出すためにajaxによって呼び出されるコードにjavascriptを挿入します。

$(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
    }
});

同様のことを試みて、自分のページにコードを挿入しようとしました。

誰か提案がありますか？

4

1 に答える 1

0

さて、私はこれを解決しようとし続け、私が間違っていたことを発見しました。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-22T22:38:41.257 に答える