4

ギャラリーには、よく知られた優れたjQueryColorboxを使用しています。画像の一部がajaxでページに追加されています。カラーボックスをページ上のすべての新規および既存の画像にバインドし、それらすべてをグループ化しようとしています。現在、私は2つのうち1つだけを達成することに成功しています。このコードを使用すると、すべての画像が1つのカラーボックスギャラリーに適切にグループ化されますが、（ajaxを介して）ページに画像を追加した後、カラーボックスはそれらにまったくバインドされません。

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

このコードでは、ページに画像を追加した後、画像がカラーボックスにバインドされますが、relグループ化は機能しません（ページに最初にロードされた画像のセットに対しても機能しません）。

$('a.exhibition').live('click', function() {
    $.fn.colorbox({
        inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true,      
        rel:"hpexhibition"
    });
    return false;
});

私もこのコードを試しましたが、同じです-画像はカラーボックスにうまくバインドされていますが、（rel）ギャラリーとしてではなく単一の画像として：

$("ul#home-exhibition").on("click", "a[rel='hpexhibition']", function (event) {
    event.preventDefault();
        $.colorbox({
            inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true, 
        rel:"hpexhibition"                
         });
});

画像ギャラリーの私のhtmlマークアップはこれです：

<ul id="home-exhibition">       
    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="3" href="#artitem-cb-details-3">
            <img src="path/to/image53.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-3" class="artitem-cb">
            //Some data of image 3 here...
          </div>    
        </div>
    </li>

    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="4" href="#artitem-cb-details-4">
            <img src="path/to/image4.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-4" class="artitem-cb">
            //Some data of image 4 here...
          </div>    
        </div>
    </li>

    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
</ul>

これら2つを組み合わせて、カラーボックスがページ上のすべての画像（ajaxを介して追加された画像も含む）で機能し、それらすべてをグループ化する方法はありますか？私はこの仕事をすることができません。これが機能する方法があるはずだと思います。

4

3 に答える 3

8

おそらくうまくいくアプローチでは、新しい要素がロードされた後にカラーボックスを再初期化する必要があります。

つまり、次のことを行う必要があります。

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

ajax 呼び出しが完了した後。

colorbox のコードを見ると、あなたのケースを処理する他の簡単な方法がわかりません。

于 2012-08-07T10:45:37.993 に答える
0

私の解決策

  // This is the trick. Initialize but don't open
  $('.colorbox').colorbox({open:false, rel:'gallery'});

  // Handle click event    
  $('.colorbox').live('click',function(e){
     $(this).colorbox({open:true, rel:'gallery'}); // now open colorbox
     return false;
  });
于 2014-01-18T11:12:47.093 に答える