fancybox 相关问题

FancyBox是一种工具,它为您的网页上的图像,html内容和多媒体添加缩放功能提供了一种漂亮而优雅的方式。

Fancybox React 样式

<Fancybox options={{ Carousel: { infinite: true, }, Toolbar: { display: { left: ["infobar"], middle: [], right: ["zoomIn", "zoomOut", "close"], }, }, Thumbs: { type: "classic", }, }} > <div className=""> <IMG src={placeholder} alt="placeholder" /> <IMG src={placeholder} alt="placeholder" /> <IMG src={placeholder} alt="placeholder" /> </div> </Fancybox> 我正在使用 fancybox 和 React。我已遵循官方文档并制作了反应组件。这里我导入并使用。它有效,我喜欢它的功能和外观。但是我如何设计缩略图或这方面的任何内容? Fancybox 是用纯 JS 编写的,您可以使用 CSS 将其设计为任何第三方脚本。查看此处任何演示的源代码并用作示例 - https://fancyapps.com/showcase/

回答 1 投票 0

fancybox 3:自定义设置未生效

我有一个html文件,里面是。我正在使用 jquery 函数 load() 加载文件/img $(".gallery").load("gallery/photos.php");

回答 1 投票 0

FancyBox 带有 Slick 滑块问题

我添加了 fancybox 和 slick 滑块,它工作得很好,但是当你在 fancybox 内滑动图像时,有一个问题我无法解决,假设你在滑块中有 2 个图像,然后你点击...

回答 2 投票 0

Fancybox 画廊无法在 laravel-inertia-react 应用程序中工作

我已将 fancybox 画廊集成到我的 web 应用程序中,但是有一个问题,当我将 fancybox 放入地图中以循环图像时,画廊未激活,我只看到一张图像,没有

回答 1 投票 0

自动打开fancybox5 iframe,无需点击页面加载

如何在不点击的情况下打开fancybox5,我的点击基本代码是: Fancybox.bind("[data-fancybox=\'iframe3\']", { 默认类型:“iframe”, 在: { “毁灭”...

回答 1 投票 0

从 iframe 隐藏 fancybox 5 窗口

如何在版本5中关闭fancybox iframe窗口? (没有任何点击) 任务完成后,表单提交后我需要它。 Fancybox.bind("[data-fancybox='iframe1']", { 默认类型:...

回答 1 投票 0

如何在fancybox的ox_options['baseTpl']上方添加过滤选项

$fancybox_options['baseTpl'] = '' 。 ... $fancybox_options['baseTpl'] = '<div class="modula-fancybox-container modula-lightbox-' . $settings['gallery_id'] . '" role="dialog" tabindex="-1">' . '<div class="modula-fancybox-bg"></div>' . '<div class="modula-fancybox-inner">' . '<div class="modula-fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' . '<div class="modula-fancybox-toolbar">{{buttons}}</div>' . '<div class="modula-fancybox-navigation">{{arrows}}</div>' . '<div class="modula-fancybox-stage"></div>' . '<div class="modula-fancybox-caption"><div class="modula-fancybox-caption__body"></div></div>' . "</div>" . "</div>"; 我想在灯箱画廊上添加过滤选项。 假设您想添加一个过滤器选项来过滤灯箱图库中的图像,您可以修改baseTpl以包含过滤器控件。这是一个例子: $fancybox_options['baseTpl'] = '<div class="modula-fancybox-container modula-lightbox-' . $settings['gallery_id'] . '" role="dialog" tabindex="-1">' . '<div class="modula-fancybox-bg"></div>' . '<div class="modula-fancybox-inner">' . '<div class="modula-fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' . '<div class="modula-fancybox-toolbar">{{buttons}}</div>' . '<div class="modula-fancybox-filter"> <label for="filter">Filter:</label> <select id="filter"> <option value="all">All</option> <option value="category1">Category 1</option> <option value="category2">Category 2</option> <!-- Add more options as needed --> </select> </div>' . '<div class="modula-fancybox-navigation">{{arrows}}</div>' . '<div class="modula-fancybox-stage"></div>' . '<div class="modula-fancybox-caption"><div class="modula-fancybox-caption__body"></div></div>' . "</div>" . "</div>"; 我添加了一个带有类 modula-fancybox-filter 的 div,其中包含一个标签和一个用于过滤器的选择元素。您可以根据您的具体用例自定义选项和值。 将过滤器控件添加到baseTpl后,您需要使用JavaScript或jQuery来处理过滤逻辑。将事件监听器附加到过滤器选择元素的更改事件,然后相应地更新灯箱图库。 $(document).ready(function () { $('#filter').on('change', function () { var filterValue = $(this).val(); // Implement logic to filter the lightbox gallery based on the selected value // You may need to hide/show or reload the images accordingly }); }); 注意:根据您的图像结构以及您想要如何过滤灯箱图库中的图像来调整过滤逻辑。

回答 1 投票 0

如何更改 fancyBox v2 中的叠加颜色

在fancyBox版本1中有overlayColor参数,但在版本2中它似乎不再起作用了。 编辑 CSS 不起作用,因为它被 plu 中的 JavaScript 覆盖...

回答 10 投票 0

模态弹出窗口中的 TikTok 视频消失了

我嵌入 fanctbox 的抖音视频消失了 我需要将不同来源的视频嵌入到 fancybox 中。我正在使用“@fancyapps/ui”:“^5.0.17”。我得到了 vi 的数据...

回答 1 投票 0

我的 Shopify 商店中的 fancybox 有问题

当我单击任何图像时,它总是从第一张图像打开。我只需从小提琴中复制并粘贴代码。 当我单击任何图像时,它总是从第一张图像打开。我只需复制并粘贴小提琴中的代码。 <div> <a data-fancybox="gallery" href="https://lipsum.app/id/2/1024x768" data-caption="Optional caption,&lt;br /&gt;that can contain &lt;em&gt;HTML&lt;/em&gt; code" > <img src="https://lipsum.app/id/2/200x150" /> </a> <a data-fancybox="gallery" href="https://lipsum.app/id/3/1024x768"> <img src="https://lipsum.app/id/3/200x150" /> </a> <a data-fancybox="gallery" href="https://lipsum.app/id/4/1024x768"> <img src="https://lipsum.app/id/4/200x150" /> </a> </div> 所以您这里所拥有的只是激活 FancyBox 滑块所需的一小部分。 如果你查看最新 fancybox 的完整 jsfiddle,它有一个完整的 HTML dom,包括激活 fancybox 功能的脚本: <script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script> <script> Fancybox.bind('[data-fancybox="gallery"]', { // }); </script> 您需要这些脚本来激活任何形式的功能。如果您匹配此处的设置,您应该不会收到您所描述的错误。 如果需要进一步诊断,请使用 Fancybox 官方小提琴:https://jsfiddle.net/tgcpey0m/

回答 1 投票 0

我嵌入fanctbox的抖音视频消失了

我嵌入 fanctbox 的抖音视频消失了 我需要将不同来源的视频嵌入到 fancybox 中。我正在使用“@fancyapps/ui”:“^5.0.17”。我得到了 vi 的数据...

回答 1 投票 0

如何在页面加载时启动 jQuery Fancybox?

我想在页面加载时启动 Fancybox(例如 Fancybox 的模态框或灯箱版本)。我可以将它绑定到隐藏的锚标记,并通过 JavaScript 触发该锚标记的单击事件,...

回答 19 投票 0

放大镜(缩放)光标位于图像上

我正在寻找一种解决方案,将光标悬停在 Fancybox 图像上时更改为放大镜。 就像在 Pinterest 上一样,当您将鼠标悬停在图像上时(使用 chrome)。 到目前为止我已经有了这个......

回答 4 投票 0

Fancybox 图片库

我在 iframe 中有下一个代码,我实现了它在父级中显示,但现在我不知道如何将图像分组,例如 fancybox 示例中的图像库。 我在一个例子中看到了这一点: $(

回答 1 投票 0

如何自定义触发Fancyapp(fancybox)滑动缩放?

这是关于 Fancybox/Fancyapp 的。 我想创建一个按钮 Zoom 来缩放下一张幻灯片。 Fancybox.bind(".gallery", {

回答 1 投票 0

Wordpress 中 fancybox 的移动响应不适合移动屏幕

我正在我的网站中使用这个插件的奇特盒子。对于PC来说反应非常好。但对于移动响应式,该框超出了移动屏幕尺寸。我已经调整了内容宽度,但看到...

回答 1 投票 0

如何通过全屏模式修复/更改边缘的CSS背景颜色?

如何在全屏模式下修复/更改边缘的CSS背景颜色? 有摄像头的地方,白色背景的颜色。我需要默认的黑色。 有前置摄像头的地方,...

回答 1 投票 0

为什么灯箱在轮播中使用时无法正确计算图像数量?

目标 我想将 Splide 轮播与灯箱一起使用。 问题 如果我在 Splide 轮播中使用灯箱,则灯箱不会正确计算图像数量。 比如说我有3个ima...

回答 1 投票 0

如何在关闭 Iframe 时重新加载父页面 - Fancybox 版本 5

我想在 fancybox 版本 5 上使用 afterClose 刷新我的父页面 afterClose: function () {parent.location.reload(true); }); 这在版本 3 fancybox 上工作正常,但在 v5 上不起作用

回答 3 投票 0

如何从 cero 创建一个 fancybox 并向其附加内容

我正在使用 FancyBox 库创建模式,当我使用文档中提到的基本方法通过将“data-fancybox”属性添加到标签时,一切正常......

回答 0 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.