Fancybox 3 - отображать галерею iframe в полноэкранном режиме - PullRequest
Новая
       27

Fancybox 3 - отображать галерею iframe в полноэкранном режиме

0 голосов
/ 14 марта 2019

Я знаю, что этот вопрос уже задавался, но в основном для Fancybox 2 (а не 3), и единственный найденный ответ мне не помог.
Моя веб-страница имеет два фрейма, один из которых содержит галерею Fancybox. До сих пор, когда я нажимаю на изображения, они открываются только в соответствующем кадре, и я хотел, чтобы изображения заполняли весь экран. После ответа здесь ( Откройте fancybox 3 в родительский элемент iframe ) Я сделал следующий код, но не смог.
Я что-то забыл? Должен ли я поместить какой-то код на главную страницу моего проекта, который содержит два фрейма? Что-то еще, что я должен сделать? 

<!DOCTYPE html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<link  href="jquery.fancybox.min.css" rel="stylesheet">
<script src="jquery.fancybox.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    parent.jQuery.fancybox.getInstance().update();
});

$.fancybox.open([
    {
        src  : 'IMG_3301.JPG',
        opts : {
            caption : 'First caption',
            thumb   : 'IMG_3301 - copie.JPG'
        }
    },
    {
        src  : 'IMG_3302.JPG',
        opts : {
            caption : 'Second caption',
            thumb   : 'IMG_3302 - copie.JPG'
        }
    }
], {
    loop : false
});
</script>

</head>

<body>

<a data-fancybox="gallery" href="IMG_3301.JPG">
    <img src="IMG_3301 - copie.JPG">
</a>

<a data-fancybox="gallery" href="IMG_3302.JPG">
    <img src="IMG_3302 - copie.JPG">
</a>

</body>
</html>

1 Ответ

0 голосов
/ 14 марта 2019

Используя parent.jQuery.fancybox, вы можете получить доступ к fancybox в родительском iframe и, чтобы запустить fancybox в родительском iframe, просто объедините два фрагмента, например parent.jQuery.fancybox.open(..)

Пример: 

  var $links = $(".imglist a");

  $links.click(function () {
    parent.jQuery.fancybox.open($links, {
      // Your custom options
    }, $links.index(this));

    return false;
  });

Демо - http://fancyapps.com/tmp/embed/

...