[英]Why does fancybox require two clicks activate?
jQuery
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("a.fancybox_videojs").click(function(e) {
e.preventDefault();
var url = jQuery(this).attr('title');
var rel = jQuery(this).attr('rel');
var img = jQuery(this).children('img').attr('src');
jQuery(this).fancybox({
'overlayOpacity' : <?php echo get_option('fancybox_overlayOpacity'); ?>,
'overlayColor' : '<?php echo get_option('fancybox_overlayColor'); ?>',
'hideOnContentClick' : false,
'content': '<div><div class="video-js-box vim-css">' +
'<video id="example_video_1" class="video-js" width="650" height="370" controls="controls" preload="auto" poster="' + img + '">' +
[...omitted...]
'</video>' +
'</div></div>',
'titleShow' : false,
'onComplete': function () {
jQuery("#fancybox-inner").css({ 'overflow': 'hidden' });
VideoJS.setupAllWhenReady();
},
'onClosed': function () { jQuery("#fancybox-inner").empty(); }
});
});
});
</script>
HTML
<div class="content-wrap container_12">
<div class="work_cat alpha">
<a href="" id="##"></a>
</div>
<div class="work_col">
<div class="work_cell" id="thumb_##">
<a class="fancbox_videojs" href="" title="" rel=""><img src=""></a>
<a class="fancbox_videojs" href="" title="" rel=""></a>
</div>
</div>
<div class="work_col"></div>
<div class="work_col omega"></div>
</div>
我这里有两个问题。
.work_cat
中的链接也能调出花式框,但它必须从对应的.work_cell
中获取变量我省略了 jQuery 代码的一部分,因此不会太长。 如果你需要看,我会发上来
fancybox 点击即可使用。
试试这个(将fancybox附加到你想要的所有地方):
jQuery("a.fancybox_videojs").click(function(){return false;})
.each(function(i,item) {
var url = jQuery(this).attr('title');
var rel = jQuery(this).attr('rel');
var img = jQuery(this).children('img').attr('src');
jQuery(this).fancybox({
'overlayOpacity' : <?php echo get_option('fancybox_overlayOpacity'); ?>,
'overlayColor' : '<?php echo get_option('fancybox_overlayColor'); ?>',
'hideOnContentClick' : false,
'content': '<div><div class="video-js-box vim-css">' +
'<video id="example_video_1" class="video-js" width="650" height="370" controls="controls" preload="auto" poster="' + img + '">' +
[...omitted...]
'</video>' +
'</div></div>',
'titleShow' : false,
'onComplete': function () {
jQuery("#fancybox-inner").css({ 'overflow': 'hidden' });
VideoJS.setupAllWhenReady();
},
'onClosed': function () { jQuery("#fancybox-inner").empty(); }
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.