FancyBox-使用iframe的箭头/导航

时间:2019-01-18 20:16:47

标签: javascript jquery fancybox fancybox-3

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>

1 个答案:

答案 0 :(得分:1)

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

  

为每个对象使用相同的属性data-fancybox值来创建   画廊

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

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