问题标签 [fancybox-3]

我正在尝试使用外部 JS 文件中的 javascript 将 fancybox 3 加载到我的 prestashop 产品图像中，但我在控制台中收到此错误：未捕获的类型错误：无法读取未定义的属性“打开”。

我一直在本地测试这段代码，它工作正常。

Javascript

我目前正在使用 Fancybox 3，尽管我的浏览器 (Chrome) 似乎将我的图像解释为“文档”，从而呈现白色背景，但一切似乎都运行良好。所以我按照文档将类型更改为“图像”类型。虽然我下面的代码不起作用。

控制台错误

HTML

JS

我必须更改 to 的所有实例，$因为jQuery这是 Wordpress 的要求。

这是我正在关注的文档。

我正在使用 Fancybox 3，我需要在渲染的弹出图像标签中插入一个 alt 标签（这个：）

有没有办法做到这一点？

这是我的标记，在 Jekyll 中循环：

{{ data[1] }}是我定义 alt 标签的地方。缩略图 alt 标签似乎覆盖了a标签中的标题。有没有办法得到它，以便在弹出主图像时，有一个与之关联的 alt 标签（或标题标签）？

我试过了，但由于某种原因它不起作用：

我试图弄清楚为什么动态插入到 Fancybox 3 渲染的 img 标记中的 alt 标记以看似随机的顺序出现。

我在 Jekyll 中有一个 YAML 列表，并且 alt 标签存储在图像之后：

我有一个使用 Fancybox 的循环：

因此循环遍历 YAML 列表并获取相关信息（项目名称、URL、alt 标签）并将其插入到 Fancybox 标记中。

我有这个 jQuery，为渲染的 Fancybox 图像标记添加一个 alt 标记。我认为这个问题与这个的加载间隔有关：

{{ data[1] }}保存项目 > 主中的 alt 标签。

当我加载页面并检查它时，我看到了这个：

<img class="fancybox-image" src=“/path/to/jupiter_pic_1.png" alt=" alt4">

但它应该是：

<img class="fancybox-image" src="/path/to/jupiter_pic_1.png" alt=" alt1">

当我滚动到下一张图片时，它应该是：

<img class="fancybox-image" src="/path/to/jupiter_pic_2.png" alt=" alt2">

但是，在页面源代码中，标记正是应有的方式：

知道为什么会这样吗？

从 2.x 升级到 3.0 后，我的应用程序崩溃了。新版本有没有类似的功能

Fancybox lib 文件 (jquery.fancybox.css) 在谷歌页面洞察测试中显示为渲染阻止脚本。解决方案？？？？

我已经尝试了很多但没有成功任何帮助将不胜感激

Fancybox 3 使用主题标签将当前视图保留在 URL 中：

但是，对于导航已经需要标签的网站来说，这太糟糕了：

Fancybox 3 将替换为

有没有办法同时使用这个导航和 Fancybox 3？

我正在将 Fancybox 用于大型画廊，但我似乎无法找出正确的方法来使用 tabindex 来专注于单个画廊控件，以进行键盘导航。

知道我做错了什么吗？我已将 tabindex="1" 附加到每个节点并以这种方式对其进行了测试 - 当我在浏览器中使用选项卡时，我似乎得到的只是对标题的关注，但没有任何控件（按钮等）。

http://fancyapps.com/fancybox/3/

在处理fancybox中动态调整iframe的大小时，我无意中发现设置data-width和data-height在阅读此答案[data-fancybox]后很有帮助。

示例 HTML 元素：

和js：

我想不通的是，fancybox 文档中没有对 HTML 元素的解释data-width和data-height用法（如果我错了，请纠正我）。

注意：上面的这两个代码片段对我有用，但它们必须一起工作，如果其中一个被取消，它将无法工作。

任何人都可以为我解释一下吗？

我正在使用 FancyBox 3 jQuery 插件，总的来说它很棒。与我的网站完美配合，但通常情况下，在网页上包装图像的锚链接具有href指向不是图像而是指向另一个站点或网页的链接的 URL，因此 FancyBox 3 打开它而不是锚内的图像。

我的 HTML 看起来像这样

我添加了一个数据属性data-test，以查看是否可以让 FancyBox 获取其中的 URL 作为源 URL（如果data-test该锚点存在）

我的 JS 代码是

我没有做任何特别的事情。我尝试的是使用这样的beforeLoad回调设置源

但$(this).find("img").attr('data-test')似乎不起作用。

任何想法我在这里做错了什么，或者是否有其他更标准的方法？