jquery-ui - Fancybox - jQuery Ui アコーディオンの統合

Question

私は現在 Fancybox を使用しており、jQuery UI アコーディオンを使用して、画像の下にあるテキスト キャプションの開閉を切り替える機能を追加したいと考えています。残念ながら、jQuery UI アコーディオンを機能させるのに苦労しています。ページ (Fancybox の外部) でアコーディオンをテストしたところ、問題なく動作しました。

コードは次のとおりです。

<script>
$(document).ready(function() {

$("a.fancybox").fancybox({
    'titlePosition' : 'outside',
});

    $( "#accordion" ).accordion({
    collapsible: true
});

});
</script>


<a class="fancybox" rel="group1" href="images/example.jpg" title="<div id='accordion'><h3><a href='#'>Example</a></h3><div><p>text here</p></div></div>" ><img src="images/example.jpg" alt="Portraits"></a>

どんなガイダンスも本当に感謝しています！ありがとうございました。

Answer 1

他のプラグインを使用せずに、fancybox 内でタイトルを切り替える方が簡単ではないでしょうか?

$("a.fancybox").fancybox({
 'titlePosition' : 'over',
 'onComplete' : function() {
  $("#fancybox-wrap").hover(function() {
   $("#fancybox-title").show();
  }, function() {
   $("#fancybox-title").hide();
  }); // hover
 } // onComplete
}); // fancybox

http://fancybox.net/blog No. 3でデモをチェック

onComplete次のようなオプションを微調整するアニメーションを追加することもできます

'onComplete' : function() {
 $("#fancybox-title").hide();
 $("#fancybox-wrap").hover(function() {
  $("#fancybox-title").stop(true,true).slideDown(200);
 }, function() {
  $("#fancybox-title").stop(true,true).slideUp(200);
 }); // hover
} // onComplete

Answer 2

このフィドルを見てください

スライドトグルの説明付きの画像