UIのアコーディオンヘッダー内のjQuery ColorBoxプラグイン

Question

まず、これが私が達成しようとしていることです：私は画像の親指といくつかの基本情報を持つオブジェクトのリストを持っています。画像をクリックすると、画像の大きなバージョン、またはオブジェクト情報の他の場所を参照して、オブジェクトに関する多くの追加情報を含むDIVを展開することができます。

これはjquery UIアコーディオンとyoxviewの組み合わせで動作しましたが、yoxviewはいくつかのブラウザで痛みを抱き、ColorBoxで置き換えることにしました。

ここに問題がありますが、私はこれを使用していますが、イメージをクリックすると、ColorBoxが開きますが、アコーディオンもトリガされます。例えば、余分な情報をクリックして拡大した画像を見るために親指をクリックすると、アコーディオンが閉じるので、これらのオブジェクトをナビゲートしてチェックするための微風ではなく、本当に苦痛になります。

$("#list-accordion").accordion(
    { 
     icons: false , 
     autoHeight : false , 
     active: false , 
     header: '.list-accordion-header' , 
     collapsible: true 
    } 
); 

をし、カラーボックスのために：準備ができて、私はこれを持っている文書で

<div id="list-accordion"> 
    <div class="list-accordion-header"> 
    <span class="list-thumb-container"> 
     <a href="someplace_thumb.jpg" title="some title" class="group1"> 
     <img src="somplace_large.jpg" /> 
     </a> 
    </span> 
    <div class="list-basic-details"> 
     The basic explanation comes here 
    </div> 
    </div> 
    <div class="list-extra-detail"> 
    All the rest of the information in the panel of the accordion 
    </div> 
</div> 

：

は

$(".group1").colorbox({rel:'group1'}); 

（私はので、RELを使用

これは、セットアップだ方法です1つのオブジェクトに複数のイメージがある可能性があります。私はHTMLの例を簡略化しました）

0画像をクリックしたときに、私は通常、このラインの下のコードを使用していることを確認するために

：、無数の方法で

$(".group1").click(function(e){ e.stopPropagation(); }); 

しかし、私が試したのstopPropagationが、それぞれのあらゆる試みは、カラーボックスをsabotages 。大きな画像は問題なく表示されますが、ライトボックスの代わりにウィンドウ自体に表示されます。

要するに、yoxviewとは異なり、クロスブラウザで動作するライトボックスがありますが、画像をクリックするとアコーディオンがトリガーされるという望ましくない副作用があります。

イメージ（リンク）はアコーディオンヘッダーの内側にありますが、クリックするとColorBoxは起動されますが、アコーディオン自体はトリガーされないように、ここで助けていただければ幸いです。

乾杯。

Answer 1

[OK]をしばらく時間がかかりましたが、問題を解決しました。私はこのソリューションは非常にきれいだとは言わない、それは働いているようだ、とクロスブラウザーで。

私の解決策の鍵は、アコーディオンのヘッダーからColorBoxリンクを削除することでした。しかし、私はまだそのヘッダーの中に親指を置いていました。そのアコーディオンペインを開かずにクリックして画像の拡大版を開くことができます（利用可能であれば、ColorBoxを他の画像にブラウズできます）。

これは私がやったことです、まず私はアコーディオンを再構成しました。私は親指を持っていたが、その周りのColorBoxを引き起こしたリンクを削除した。私は代わりにそのリンクをペインに追加しましたが、隠れたdivに追加しました。あなたが見ることができるように、私は親指でクリックをキャッチし、それがアップバブルはできません。この方法でそれをブロック

$('a.group1').colorbox({rel: group1});  

$(".img-thumb").click(function(event){ 
    $('.' + $(this).attr('rel') + ':first').click(); 
    return false; 
}) 

// of het nu items of veilingen bevat, de item accordion moet opgestart 
$("#list-accordion").accordion(
    { 
     icons: false , 
     autoHeight : false , 
     active: false , 
     header: '.list-accordion-header' , 
     collapsible: true 
    } 
); 

：

<div id="list-accordion"> 
    <div class="list-accordion-header"> 
    <span class="list-thumb-container"> 
     <img src="somplace_thumb.jpg" class="img-thumb" rel="group1"/> 
    </span> 
    <div class="list-basic-details"> 
     The basic explanation comes here 
    </div> 
    </div> 
    <div class="list-extra-detail"> 
    <div class="hidden-img-links">      
     ** all my image links in this format ** 
    <a class="group1" href="somplace_large.jpg" title="some text">name</a> 
    </div> 
    All the rest of the information in the panel of the accordion 
    </div> 
</div> 

は今、私は準備ができて、私の文書で、次のJSコードを使用します親にしかし、実際にブロックする前に、私はColorBoxで開く最初のイメージにクリックを送信します。これらのColorBoxリンクはもはやアコーディオンのヘッダー内にはないので、アコーディオンに影響を与えることなくクリックすることができます。アコーディオンのペインを開かずに親指をクリックしてColorBoxを開くことができます。