Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

I have two problems here.

  1. It takes two clicks to bring up the fancybox.
  2. 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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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(); }
        });
    });

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...