FancyBox - Стрелки / Навигация с использованием iframe - PullRequest
Новая
       7

FancyBox - Стрелки / Навигация с использованием iframe

0 голосов
/ 18 января 2019

В Этот CodePen У меня есть 3 ссылки.

Кто из них открывает iframe с помощью fancybox. Можно ли создать навигационные стрелки между фреймами, как это делает Redmine?

Ниже кода 

<!-- FancyBox -->

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.css">

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.js"></script>

<!-- FancyBox -->

<h2>fancybox v3.5 - Iframe</h2>

<p>
  Basic usage of fancyBox - simply add <code>data-fancybox</code> and <code>data-type="iframe"</code> attributes to your link.
</p>

<hr class="my-5" />

<p>

  <a data-fancybox data-type="iframe" data-src="https://codepen.io/about/" href="javascript:;">
    Example #1 - Webpage
  </a>

  <br />

  <a href="https://codepen.io/pro/teams/" data-fancybox data-options='{"type" : "iframe", "iframe" : {"preload" : false, "css" : {"width" : "600px"}}}'>
    Example #2 - Webpage, custom options
  </a>

  <br />

  <a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;">
     Example #3 - Sample PDF file
  </a>

</p>

1 Ответ

0 голосов
/ 19 января 2019

См. Документы - http://fancyapps.com/fancybox/3/docs/#usage

используйте один и тот же атрибут data-fancybox для каждого из них, чтобы создать галерея

Итак, замените data-fancybox на что-то вроде data-fancybox="iframe", и галерея будет создана из соответствующих элементов.

https://codepen.io/anon/pen/OrKRRO?editors=1000

...