华丽的弹出式视频不是弹出式的

magnific-popup video isn't popup

本文关键字：弹出式 视频      更新时间：2023-09-26

我对js和jQuery很陌生，只是从模板中使用它。

我的目标是像视频灯箱一样使用华丽的弹出框，但是我不能使它工作。

我已经尝试删除一些我使用过的库，但似乎没有改变任何东西。

我哪里出错了?我把它上传到这里了。

<!DOCTYPE HTML>
<!--
 Overflow 1.1 by HTML5 UP
 html5up.net | @n33co
 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 -->
<html>
    <head>
        <title>Overflow by HTML5 UP</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link rel="shortcut icon" href="../favicon.ico">
            <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic" rel="stylesheet" type="text/css" />
            <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
            <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
            <script src="js/jquery.magnific-popup.js"></script>
            <script src="js/jquery.min.js"></script>
            <script src="js/jquery.poptrox.min.js"></script>
            <script src="js/skel.min.js"></script>
            <script src="js/init.js"></script>
            <script type="text/javascript"> document.createElement('video');document.createElement('audio');document.createElement('track'); </script>
            <script src="js/video.js"></script>
            <script> videojs.options.flash.swf = "js/video-js.swf"</script>
            <link rel="stylesheet" href="css/effets_perso.css" />
            <link rel="stylesheet" href="css/video-js.css">
            <link rel="stylesheet" href="css/perso.css">
            <link rel="stylesheet" href="css/magnific-popup.css">
            <noscript>
                <link rel="stylesheet" href="css/skel-noscript.css" />
                <link rel="stylesheet" href="css/style.css" />
            </noscript>
            <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
            <!--[if IE]>
             <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
             <![endif]-->
            </head>
<body>
        <!-- Generic -->
<article class="container box style3">
    <header>
        <h2>Generic Box</h2>
        <p>Just a generic box. Nothing to see here.</p>
    </header>
    <section>
        <header>
            <h3>Paragraph</h3>
            <p>This is a byline</p>
        </header>
        <a class="test-popup-link" href="images/pic02.jpg">Image</a>
        <script type="text/javascript">
            $(document).ready(function() {
                              $(".test-popup-link").magnificPopup({
                                                                  type: "image"
                                                                  // autres options
                                                                  });
                              });
            </script>
        <div align="center">
            <a class="popup-youtube" href="http://www.youtube.com/watch?v=miTfXsMn5ms">video YouTube </a><br>
            <a class="popup-vimeo" href="https://vimeo.com/45830194">video sur Vimeo </a><br>
            <a class="popup-gmaps" href="https://maps.google.com/maps?q=epfl+&amp;hl=en&amp;ll=46.521666,6.56652&amp;spn=0.016005,0.038581&amp;sll=37.0625,-95.677068&amp;sspn=37.683309,79.013672&amp;t=h&amp;hq=epfl&amp;z=15&amp;iwloc=A">EPFL sur Google Map</a>
<script type="text/javascript">
   $(document).ready(function() {
       $(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({                                                                                               
            disableOn: 700,
            type: "iframe",
            mainClass: "mfp-fade",
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
        });
    });
</script>
</div>
</video>
</section>
</section>
</article>
</body>
</html>

我不知道这是否是完整的问题，但你的javascript标签的顺序绝对是问题的一部分。

<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>

可以看到，在实际加载jquery库(js/jquery.min.js)之前，您正在加载js/jquery.magnific-popup.js。这是一个重要的区别，因为您的magnifica -pop .js使用jquery。如果你在你的网页上查看控制台(输入ctrl+i，并切换到控制台选项卡)，你会看到几个错误，与jquery没有被加载，因此在华丽的弹出窗口.js函数没有被定义。

所以把你的jquery脚本移到顶部

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>

如果仍然不起作用。查看控制台，并尝试在编写Stack Overflow问题时包含错误。

相关文章：