我正在尝试使用JWPlayer6创建一个混合图像和视频的图库组合。
我每个人都是独立的小组,但我不能锻炼如何整合这两个小组。
<!-- FancyBox to display images -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function(){
}
});
});
<!-- FancyBox to display videos -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-video").fancybox({
content: '<div id="video_container" style="">Loading video...</div><br>',
autoSize: true,
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function(){
this.title = $(this.element).attr('caption');
},
afterShow: function(){
jwplayer("video_container").setup({
flashplayer: "/static/js/libs/jwplayerjwplayer.flash.swf",
file: this.href,
autostart: 'true'
}); // jwplayer setup
} // afterShow
}); // fancybox
}); // on
</script>
答案 0 :(得分:2)
好的,我不确定这是JFK的建议,但这似乎有效,尽管必须有一种更有效的方法:
<style type="text/css">
.fancybox-nav {
height: 80%;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
autoSize: true,
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function(){
if($(this.element).attr('containertype')=='video'){
this.content = '<div id="video_container" style="">Loading the player ... </div><br>';
};
},
afterShow: function(){
if($(this.element).attr('containertype')=='video'){
jwplayer("video_container").setup({
flashplayer: "jwplayer.flash.swf",
file: this.href,
autostart: 'true'
}); // jwplayer setup
};
}// afterShow
}); // fancybox
}); // on
</script>
HTML:
<a class="fancybox" rel="group" title="Video 1" data-fancybox-type="anything" containertype="video" href="1.flv"><img src="1.png"/></a>
<a class="fancybox" rel="group" title="Image 2" href="2.png"><img src="2.png"/></a>