2012-04-11 151 views
1

我目前正在使用Fancybox,并希望添加使用jQuery UI手风琴在图像下方打开或关闭文本标题的功能。不幸的是,我很难让jQuery UI手风琴起作用。我在页面上测试了一个手风琴(在Fancybox之外),它运行良好。Fancybox - 集成jQuery Ui手风琴

下面的代码:

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

任何指导意见将非常感激!谢谢。

+0

你只是想打开图像下评论?手风琴似乎有点矫枉过正(如果我诚实地说,只是错误的......) – 2012-04-11 21:12:11

回答

0

那岂不是更容易切换里面的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 
+0

非常感谢!非常感激。 – user1255062 2012-04-12 19:50:15