Всплывающее видео не всплывающее

Я совершенно новичок в 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>
Источник

1 ответ

Я не знаю, является ли это полной проблемой, но порядок ваших тегов 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>

Как вы можете видеть, вы загружаете js/jquery.magnific-popup.js прежде чем вы действительно загрузите библиотеку jquery (js/jquery.min.js). Это важное различие, потому что ваш magnific-popup.js использует jquery. Если вы посмотрите на консоль на вашей веб-странице (введите ctrl+iи переключитесь на вкладку консоли) вы увидите несколько ошибок, связанных с тем, что jquery не загружен, и, следовательно, функции в magnific-popup.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>

и если это все еще не работает. Посмотрите на консоль и попробуйте включить ошибки при написании вопроса переполнения стека.

Источник
Другие вопросы по тегам