fancybox 没有用于视频库的导航按钮，但它在小提琴中工作答案

【问题标题】：fancybox no navigation buttons for video gallery, but its working in fiddlefancybox 没有用于视频库的导航按钮，但它在小提琴中工作
【发布时间】：2013-06-19 17:53:03
【问题描述】：

我正在尝试使用 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>`

我错过了什么吗？

【问题讨论】：

这是我推荐的小提琴jsfiddle.net/fhpZ5

标签： jquery fancybox fancybox-2

【解决方案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 需要这样做。

【讨论】：

在 IE 9 中，它直接进入 youtube 网站。灯箱效果不来了
@user2502314 - 检查 js 错误和您的 doctype ... 或分享一个链接，我可以更快地告诉您是什么破坏了您的代码