FancyBox

Question

在 This CodePen 我有 3 个链接。

其中哪一位使用 fancybox 打开了 iframe。是否可以像 Redmine 那样在 iframe 之间创建 NavArrows？

代码下方

<!-- 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>

Answer 1

查看文档 - http://fancyapps.com/fancybox/3/docs/#usage

use the same attribute data-fancybox value for each of them to create a gallery

因此，将 data-fancybox 替换为 data-fancybox="iframe" 之类的内容，然后将根据匹配的元素创建图库。

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

FancyBox - Arrows/Navigation 使用 iframe

FancyBox - Arrows/Navigation using iframe

javascript

jquery

fancybox-3