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

看看这个小提琴

带幻灯片的图像切换描述

Answer 2

在不使用任何其他插件的情况下切换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