FancyBox - 使用 iframe 的箭头/导航答案

【问题标题】：FancyBox - Arrows/Navigation using iframeFancyBox - 使用 iframe 的箭头/导航
【发布时间】：2019-01-18 20:16:47
【问题描述】：

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

【问题讨论】：

标签： javascript jquery fancybox fancybox-3

【解决方案1】：

请参阅文档 - http://fancyapps.com/fancybox/3/docs/#usage

使用相同的属性data-fancybox 值为它们中的每一个创建画廊

因此，将data-fancybox 替换为data-fancybox="iframe" 之类的东西，画廊将由匹配的元素创建。

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

【讨论】：

有效！谢谢！