如何在 Fancybox 3 中加载多种类型答案

【问题标题】：How to load multiple types in Fancybox 3如何在 Fancybox 3 中加载多种类型
【发布时间】：2017-08-19 01:01:24
【问题描述】：

我使用Fancybox 3，这就是我加载画廊的方式（我禁用了打开/关闭动画，所以我像这样加载它：

$(document).on('click', '[data-fancybox-var]', function(e) {
    e.preventDefault();

    var links = $('[data-fancybox-var]');
    var group = [];

    $.each(links, function( key, value ) {
        group.push({
            src  : value.href,
            opts : {
                caption : value.title
            }
        });
    });

    $.fancybox.open( group, {}, links.index( this ) );
});

我有两个问题：
1. 如何轻松禁用/启用群组（无计数器）？
2. 如何加载多种类型的images/inline/iframe（仅适用于图片）？

【问题讨论】：

你能解释一下禁用/启用组（无计数器）是什么意思，一般你可以很容易地用data-fancybox="group"数据属性分组，它会被分组，否则不会。
谢谢@azs06，我创建了'data-fancybox-var'来加载我的内容而不是打开/关闭动画而不是data-fancybox="group"，代码完美运行，我只需要解决这两个问题，因为我在 js 方面的知识是基本的..
即使没有="group"，它也会加载组，这不是我要寻找的结果.. 我认为代码中的“组”有一些事情，我只是复制了它从另一个网站...
这里是example，方便理解
我明白了，问题是，如果您不想将它们分组，那么不要将所有链接保存在一个数组中，只需打开单击的链接。我将在答案中发布一个工作示例。

标签： javascript jquery html fancybox gallery

【解决方案1】：

目前您将所有链接保存在一个数组中，并在该数组上启动 fancybox，因此所有带有data-fancybox-var 的链接将被组合在一起。如果您只想在fancybox 中打开一个链接，那么只需在其上启动fancybox。

例子-

$(function(){
	$('[data-fancybox-var]').on('click', function(e){
		e.preventDefault();
		$.fancybox.open(this);
	})
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.css">	
</head>
<body>
<a href="https://farm6.staticflickr.com/5519/9432166677_aefe32aad4_k_d.jpg" data-fancybox-var title="First image">
  <img src="https://farm6.staticflickr.com/5519/9432166677_61aa7e7f90_m_d.jpg">
</a>
<a href="https://farm6.staticflickr.com/5499/30972532232_9c7db37049_k_d.jpg" data-fancybox-var>
  <img src="https://farm6.staticflickr.com/5499/30972532232_e9a298a0c5_m_d.jpg">
</a><br/>
<a data-fancybox-var data-src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" href="javascript:;">
	Sample PDF
</a><br/>
<a data-fancybox-var data-src="#hidden-content" href="javascript:;">
Hidden div
</a>	
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<p>You are awesome.</p>
</div>	
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.js"></script>	
</body>
</html>

我还附上了一个外部 pdf 文件的示例，fancybox 也支持视频和 iframe。

【讨论】：

再次感谢您，我们的想法是禁用打开/关闭动画并仅通过淡入淡出打开它，正如您在我的example 中看到的那样，关于第二个问题，我加载我的内联内容href="#inline1" 但它不适用于此代码:-(
我在你的例子中没有看到任何内联内容，你能更新一下吗？
@VadimL 我用内联内容更新了我的答案，请检查。
例如，我正在尝试加载 SWF，这是我更新的 code，查看“设置”以了解我如何加载闪存（我使用 swfobject.js），它只是打开另一个如果单击 SWF 链接，则窗口
您尝试加载它的方式应该可以工作，请注意，您正在从非安全连接加载 swf 内容，大多数浏览器会阻止它，并且大多数代码游乐场（如 jsbin、codepen）也会阻止它。您必须启用 flash 才能看到它的实际效果。工作示例run.plnkr.co/ReUfUIJYeDzY5Ibs plnkr.co/edit/jYFZvkRjn7RocvOdElLW?p=preview