magnifi c -popup basi c реализация не работает - PullRequest
Новая
       14

magnifi c -popup basi c реализация не работает

1 голос
/ 10 января 2020

Я пытаюсь реализовать самый простой c пример magnifi c -popup («Одиночное изображение лайтбокс» в официальных примерах) на странице, но не могу заставить его работать - при нажатии на миниатюре он просто открывает полноразмерное изображение в браузере.

Это мой код: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.image-popup-vertical-fit').magnificPopup({
        type: 'image',
        delegate: 'a',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        }
    });
});
</script>
</head>
<body>
<div id="page">
<a class="image-popup-vertical-fit" href="tbig.jpg">
    <img src="tsmall.jpg">
</a>
</div>
</body>
</html>

Есть идеи, что может быть не так? Я не вижу ошибок в консоли. Я добавил delegate:'a' в сценарий, как в другой топи c, но, похоже, это не помогает. Я полагаю, что это что-то довольно базовое c, но это действительно ускользает от меня ...

Спасибо!

1 Ответ

0 голосов
/ 10 января 2020

С delegate:'a' следующее не сработало. Я думаю, что без этого все будет так, как вы ожидаете 

<html>
    <head>
        <link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
        <script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
        <script src='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js'></script>
        <script>
            $( document ).ready(function() {
                $('.image-popup-vertical-fit').magnificPopup({
                    type:'image',   // no delegate:'a'
                    closeOnContentClick:true,
                    mainClass:'mfp-img-mobile',
                    image: { verticalFit:true }
                });
            });
        </script>
        <title>Magnific Popup</title>
    </head>
    <body>
        <div id='page'>
            <a class='image-popup-vertical-fit' href='//farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg'>
                <img src='//farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg' width='150px' height='150px' />
            </a>
        </div>
    </body>
</html>
...