0

我正在尝试带有 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>`

我错过了什么吗？

4

1 回答 1

0

好吧，你要么需要更多的咖啡，要么需要更多的睡眠时间；）

这个 ：

  <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您正在使用需要它。

于 2013-06-19T21:06:59.067 回答