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標題，而無需使用任何其他插件？在http://fancybox.net/blog 3號

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

檢查演示中，你甚至可以添加一些動畫扭捏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

看看這個小提琴

image with slideToggle description