2

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

私はこれをjqueryUIアコーディオンとyoxviewの組み合わせで動作させましたが、yoxviewはいくつかのブラウザーで非常に苦痛を与えていたため、ColorBoxに置き換えることにしました。

ここに問題があります。これは機能していますが、画像をクリックすると、ColorBoxが正常に開きますが、アコーディオンもトリガーされますが、もちろんそうではありません。たとえば、追加情報をクリックして開き、親指をクリックして画像を拡大すると、アコーディオンが閉じるため、これらのオブジェクトをナビゲートしてチェックするのは簡単ではなく、本当に苦痛になります。

設定は次のとおりです。

<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>

ドキュメントの準備ができたら、次のようになります。

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

およびColorBoxの場合：

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

（1つのオブジェクトに複数の画像がある可能性があるため、relを使用します。htmlの例を簡略化しました）

画像がクリックされたときに確認するために、私は通常、次の行のコードを使用します。

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

ただし、stopPropagationを無数の方法で試しましたが、試行するたびにColorBoxが妨害されます。大きな画像は問題なく開きますが、ライトボックスではなくウィンドウ自体に表示されます。

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

画像（リンク）がアコーディオンヘッダー内にあるにもかかわらず、それをクリックするとColorBoxがトリガーされますが、アコーディオン自体はトリガーされないようにするために、ここで助けていただければ幸いです。

乾杯。

4

1 に答える 1

3

しばらく時間がかかりましたが、問題は解決しました。このソリューションが非常にクリーンであると言っているわけではありません。機能しているようで、クロスブラウザです。

私の解決策の鍵は、アコーディオンのヘッダーからColorBoxリンクを削除することでした。ただし、そのヘッダー内に親指が必要でした。そのユーザーは、アコーディオンペインを開かなくても、クリックして画像の拡大バージョンを開くことができます（また、利用可能な場合はColorBoxで他の画像を参照できます）。

これが私がしたことです。最初にアコーディオンを再構築しました。私は親指を保持しましたが、その周りのColorBoxをトリガーしたリンクを削除しました。次に、そのリンクを代わりにペインに追加しましたが、非表示のdivに追加しました。

<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コードを使用できるようになりました。

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

ご覧のとおり、親指のクリックをキャッチしてブロックします。これにより、親にバブルすることができなくなります。しかし、実際にブロックする前に、ColorBoxで開きたい最初の画像にクリックを送信します。これらのColorBoxリンクはアコーディオンのヘッダー内にないため、アコーディオンに影響を与えることなくクリックできます。したがって、親指をクリックして、アコーディオンのペインを開かずにColorBoxを開くことができます。

于 2012-02-03T11:08:10.680 に答える