为什么fancybox需要两次点击激活？ [英] 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_1class =video-jswidth =650height =370 controls =controlspreload =autoposter ='+ img +'>'+ 
 [... omitted ...] 
'< / video>'+ 
'< / div>< / div>'，
'titleShow'：false，
'onComplete'：function（）{
 jQuery（＃fancybox-inner ）.css（{'overflow'：'hidden'}）; 
 VideoJS.setupAllWhenReady（）; 
}，
'onClosed'：function（）{jQuery（＃fancybox-inner）。 } 
}）; 
}）; 
}）; 
< / 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_cellid =thumb _ ##> 
< a class =fancbox_videojshref =title = =>< img src =>< / a> 
< a class =fancbox_videojshref =title = =>< / a> 
< / div> 
< / div> 
< div class =work_col>< / div> 
< div class =work_col omega>< / div> 
< / div> 
  
这里有两个问题。
 
 
需要两次点击才能打开花式框。
 
 
我想要 .work_cat 中的链接打开花式框，但它必须从对应的 .work_cell  
 
 
我省略了jQuery代码的一部分，所以它不会太长。如果您需要查看，我会将其发布
解决方案
 fancybox可以点击。
 
 
 
尝试这样做（将fancybox附加到所有你想要的地方）：
  .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_1class =video-jswidth =650height =370controls =controlspreload =autoposter ='+ img + >'+ 
 [... omitted ...] 
'< / video>'+ 
'< / div>< / div>'，
'titleShow'：false，
'onComplete'：function（）{
 jQuery（＃fancybox-inner）。css（{'overflow'：'hidden'}）; 
 VideoJS.setupAllWhenReady（）; 
}，
'onClosed'：function（）{jQuery（＃fancybox-inner）。 } 
}）; 
}）; 
  
 
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>
I have two problems here.

It takes two clicks to bring up the fancybox.
I want the link in .work_cat to also bring up the fancybox, but it has to get the variables from the coresponding .work_cell
I omitted part of the jQuery code so it would not be too long. If you need to see it, I will post it up
解决方案
fancybox works on click.

Try this instead (attach fancybox to all the places you want it):
  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(); }
        });
    });


                        
这篇关于为什么fancybox需要两次点击激活？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！