Question

我正在尝试使用youtube视频的精美包装盒，我通过这个小提琴（在评论中添加），这个小提琴我只是通过@JK从堆栈流过。它在小提琴中工作正常，但是当我复制并在我的应用程序中应用它时，导航按钮功能不存在，并且缺少背景灯箱。我对jquery很新。以下是我的html文件

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
      <HEAD>
       <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
       <script type="text/javascript" src="jquery.fancybox.js"></script>
       <link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />  
       <TITLE> New Document </TITLE> 
       <META NAME="Generator" CONTENT="EditPlus"> 
       <META NAME="Author" CONTENT="">
       <META NAME="Keywords" CONTENT=""> 
       <META NAME="Description" CONTENT="">
       <script> 
          $(".fancybox").attr('rel', 'gallery').fancybox({
             openEffect  : 'none',
             closeEffect : 'none',
             nextEffect  : 'none',
             prevEffect  : 'none', 
             padding     : 0, 
             margin      : 50    });
      </script>
      <script type="text/css">
        .fancybox-nav {
            width: 60px;
          }
        .fancybox-nav span {
            visibility: visible;
          }
        .fancybox-next { 
            right: -60px;
          }
     </script>
   </HEAD>
  <BODY>
     <a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1&wmode=opaque">Video #1</a><br />
     <a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/cYplvwBvGA4?autoplay=1&wmode=opaque">Video #2</a> 
  </BODY>
 </HTML>`

我错过了什么吗？

Answer 1

嗯，你需要更多的咖啡或更多的睡眠时间;）

这：

  <script type="text/css">
    .fancybox-nav {
        width: 60px;
      }
    .fancybox-nav span {
        visibility: visible;
      }
    .fancybox-next { 
        right: -60px;
      }
 </script>

应该是：

  <style type="text/css">
    .fancybox-nav {
        width: 60px;
      }
    .fancybox-nav span {
        visibility: visible;
      }
    .fancybox-next { 
        right: -60px;
      }
 </style>

...如果你能看到差异。

此外，将自定义fancybox脚本包装在.ready()方法中是个好主意，例如

  <script type="text/javascript">
   $(document).ready(function(){
      $(".fancybox").attr('rel', 'gallery').fancybox({
         openEffect  : 'none',
         closeEffect : 'none',
         nextEffect  : 'none',
         prevEffect  : 'none', 
         padding     : 0, 
         margin      : 50    
      });
   });
  </script>

请注意，我已将type="text/javascript"添加到script代码中，因为您使用的DOCTYPE需要该代码。

fancybox没有视频库的导航按钮，但它的工作小提琴

1 个答案: