fancyBox 3 中的转换

2024-03-30

是否可以指定在 fancyBox 3 中使用哪个转换?我对 3 个转变感兴趣:

  1. 打开幻灯片/画廊
  2. 在幻灯片之间导航
  3. 关闭幻灯片/图库

默认情况下,fancyBox 3 对不同类型的内容使用不同的过渡。

<a href="img.jpg" data-fancybox><img src="thumb.jpg"></a> <!--This will zoom in-->
<a data-fancybox href="#html-content">Open</a> <!--This will fade in-->
<div id="html-content" style="display: none;">
  <p>This content does just fades in.</p>
</div>

看这个codePen http://codepen.io/Stadly/pen/ZebOWE查看它的实际效果,包括导航转换。对于图像,我们有:

  1. Zoom in
  2. 水平滑动
  3. Zoom out

对于 html 内容,我们有:

  1. Fade in
  2. 水平滑动
  3. Fade out

是否可以更改 fancyBox 3 中的默认行为?例如让图像淡入和淡出?我在 中找不到任何相关信息文档 http://fancyapps.com/fancybox/3/docs/.


从 fancyBox 版本 3.1.20 开始,这可以通过选项animationEffect and transitionEffect。你可以找到文档here http://fancyapps.com/fancybox/3/docs/#options.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

fancyBox 3 中的转换 的相关文章

  • 使用 setAttribute() 添加“onclick”函数

    为什么以下不起作用 显然该功能尚未添加 function activatetypeinput event devtype The function is called but it doesn t set the attribute var
  • 跨域XMLHttp请求

    这是我的情况 我有一台 Web 服务器机器 一台客户端机器和第三台运行一些侦听 XMLHttpRequest 的程序的机器 客户端从客户端计算机访问网络服务器 进行一些更改 然后单击 保存 此时 数据被发送回网络服务器和第三台机器 所有这些
  • javascript 中对象的“异步”循环

    通常 我们可以对数组和对象进行循环来迭代属性 值 但循环是阻塞的 但是 超时可用于模拟异步循环 我设法为数组做到了这一点 http jsfiddle net LHhy2 do stuff function asyncLoop i do st
  • 无法在 JavaScript for 循环中读取 null 的属性“长度”

    我正在尝试制作一个像 Stack Overflow 那样的 Markdown 编辑器 如果我实际上没有在文本区域中键入星号和包含短语的 http 我会收到标题中列出的此错误 如果我只输入包含星号的短语 则错误指的是这一行 if linkif
  • pubnub 和 head.js

    有没有人成功整合过pubnub http www pubnub com 和 head js 正确吗 Pubnub http www pubnub com 希望我将他们的脚本放在页面底部并带有 div 就在它前面的标签 这可以确保在最后调用
  • Javascript DOM setAttribute 在函数调用中不起作用

    我有一个带有输入元素的 HTML 文件 我希望向其中添加一个名为 valid fieldset011 的新属性 该属性用作 AngularJS 验证器的链接 输入元素具有属性 id fieldset011 如果我使用以下脚本 包含在脚本标签
  • 定义 js-xlsx 单元格范围

    我正在尝试使用 js xlsx 读取 Excel 值 我可以使用以下代码从工作簿工作表中获取单元格值 if typeof require undefined XLSX require xlsx var workbook XLSX readF
  • Chrome 扩展同步调用 - 仅在窗口关闭后创建窗口

    我有这个代码 function voteNewWindow mailNum chrome windows create url http www google com incognito true function window conso
  • 将文本大小调整为矩形 在 Canvas HTML5 中调整大小

    我是 Canvas 新手 我正在创建一个网站 以在调整矩形大小时增加文本 我尝试了很多 但没有任何效果 实际上 我希望如果我仅按其宽度调整矩形大小 向左拉伸 向右拉伸 则仅应增加文本宽度而不是字体大小 我已经完成了字体大小 但发现增加孤立文
  • 通过JS Laravel访问存储目录

    有没有办法访问storage目录 该目录已经链接到publicJS 中的目录 我正在尝试制作一个上传图片的表单 验证脚本 if request gt hasFile photos marker gt photos request gt ph
  • console.log() 显示同一对象属性的矛盾值

    我想我可能要疯了 我使用 console log 来查看对象的状态 然后在下一行对同一对象的特定属性执行 console log 并为每个属性获取不同的值 我正在使用的代码是 console log this pictures Items
  • 如何检测元素内容何时发生变化

    我正在寻找一种方法来监视元素内动态填充 无页面重新加载 内容 以便我可以将类添加到另一个元素 到目前为止我有这个 HTML div class message container div class messages error span
  • 使用日期字符串数组在引导日期选择器中设置禁用月份不起作用

    我有一个日期选择器 其配置如下 HTML div class input group date div
  • 如何处理requireJs超时错误?

    我正在使用 require js 作为加载框架编写一个移动混合应用程序 我遇到加载错误的问题 我想做的是在设备离线且无法下载在屏幕上显示地图所需的 google 地图 API 脚本时设置后备解决方案 我得到的只是 Uncaught Erro
  • 从 DirectionsRenderer 中获取折线或标记的事件

    我正在使用 DirectionsService 和路线方法来生成 DirectionsResult 我还使用 DirectionsRenderer 对象来显示结果 因为它非常易于使用 我在检测 Directions changed 事件时没
  • JavaScript 数组扩展语法的时间复杂度是多少?

    我想知道在 JavaScript 中使用数组扩展的时间复杂度是多少 是线性 O n 还是常数 O 1 下面的语法示例 let lar Math max nums 传播称为 Symbol iterator 有关对象的属性 对于数组 这将迭代数
  • Firebase 警告:使用 Firebase Cloud Function 搜索数据时使用未指定的索引

    我构建了一个 Firebase 云函数 用于查找 IsNotificationEnabled 值等于 true 的用户 我的部分职能 export const sendPushNotification functions https onR
  • mozilla pdf.js 没有全视图

    我喜欢这个 pdf 查看器https github com mozilla pdf js https github com mozilla pdf js Demo http mozilla github com pdf js web vie
  • JavaScript:测试与执行

    我想知道检查字符串 例如邮件 密码等 的最佳方法是什么 i exec a vs i test a exec返回值 test true test 1 way var mail req body mail if check mail exec
  • 将 RequireJS 与遗留代码结合使用

    我正在处理一个非常大的项目 该项目使用 包含带有脚本标记的 javascript 文件的旧版 JSP 页面 使用其他 javascript 模块而不使用 RequireJS 的骨干模型和视图 现在 我们希望开始将 RequireJS 与 j

随机推荐

  • 您可以从多个线程访问单个 std::unique_lock 吗?

    我在概念化如何unique lock应该是跨线程操作 我尝试制作一个快速示例来重新创建我通常会使用的东西condition variable for include
  • 使用 ng-repeat 时默认选中单选按钮

    我一直想使用 ng repeat 从屏幕上显示的单选按钮列表中签出一个单选按钮 但我的代码不起作用 这就是我正在做的 div class clubRole div div div
  • CI for Qt 应用程序:使用不同的 Qt 版本进行构建

    我使用 Travis CI 为我的简单 Qt 应用程序进行持续集成 我的 travis yml 文件看起来像这样 基于这个要点 https gist github com jreese 6207161 language cpp before
  • 如何在 C# 中获取应用程序设置的名称?

    在Visual C 的应用程序设置中 我们可以创建一系列具有特定Name Type Scope和Value的设置 我可以通过代码访问该值 string color Myproject Properties Settings Default
  • 比较 Go 模板中的两个变量

    在我传递给模板的数据中 我有两个变量Type and Res Type我想比较为我的选择字段预先选择一个选项 为了说明我的问题 我创建了这个简化版本 package main import bufio bytes html template
  • python 中的交互式输入

    以下是我需要执行的操作的说明 你要编写一个完整的程序 获取三段数据 然后对它们进行处理 这三条信息是布尔值 字符串和整数 程序的逻辑是这样的 如果布尔值为 True 则打印字符串两次 一次带双引号 一次不带 否则打印两倍的数字 这是我到目前
  • 动态 HTML 到 PDF [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我需要能够将动态 HTML 通过 javascript 在页面加载时呈现的 html 转换为 PDF 我
  • 从 WiX 提升的安装程序运行未提升的自定义操作

    我正在尝试弄清楚如何从提升的 WiX 安装设置程序运行自定义操作 WiX 生成的 msi 文件由 DotNetInstaller 执行 在 WiX 中 我有一个 Package 部分 其中 InstallScope 设置为 perMachi
  • Ajax 调用在 IE8 中不起作用

    我正在阅读几篇关于此的文章 并对我的代码进行了一些更改 但没有成功 任何人都可以调查一下 看看这里发生了什么 或者也许是另一种方法来完成我需要的事情 使用 ziptastic 通过邮政编码检索城市 州 该代码在 Chrome 中运行良好 h
  • __del__ 在程序结束时

    假设有一个程序 在运行时其中有几个对象 程序结束时是否调用每个对象的 del 方法 如果是的话 我可以做这样的事情 class Client del self disconnect from server 有许多潜在的困难 http doc
  • 从非托管 C++ 创建 DLL

    我目前有一个用非托管 C 编写的控制台应用程序 源代码由一个入口点组成main以及其他一些功能 我需要从此代码创建一个 DLL 以便我可以从其他项目 特别是托管 C 使用它 另一个问题 我是否必须为此目的编写一个包装类 由于我对托管 非托管
  • 如何使用 FastAPI 返回 HTMLResponse

    是否可以在端点显示 HTML 文件 例如用户正在访问的主页 是的 FastAPI 可能有HTMLResponse 您可以返回一个HTMLResponse from fastapi import FastAPI from fastapi re
  • 无法修改函数以独立工作而不是依赖于返回的结果

    我用 python 编写了一个脚本 在向某些链接发送请求时使用代理 以便从那里解析产品名称 我目前的尝试完美地完成了这项工作 这个功能parse product 完全依赖于返回的结果 代理 以便以正确的方式重用相同的代理 我正在尝试修改pa
  • 当网格项与末端/底部对齐时,滚动不起作用

    我想使用创建聊天CSS grid并遇到了我无法合并的问题align self end and overflow y auto The ul包含所有消息并且应该与底部对齐 这样即使只有一条消息 它也会出现在底部 聊天的页眉和页脚是固定的 您只
  • ApplicationListener 的注解版本及类似接口

    您可以使用如下代码根据 Web 服务关闭 或刷新 启动 的时间执行一些事件 public class APIService implements ApplicationListener
  • 使用 jquery 移动元素

    我如何使用 jQuery 来移动元素 position absolute left 169px top 182px to position absolute left 169px top 230px 清晰的移动不仅是CSS 它也必须是移动的
  • 在 C# 中使用 ActiveX

    我有这样的 JavaScript 代码 o new ActiveXObject ASDFsome Application utilites WScript CreateObject ASDF Utilites UTF Converter u
  • 在记事本++中选择并删除整个列

    有没有办法在记事本 中选择并删除整个列 假设notepad 中有这样一条日志 Dec 14 14 49 34 Dec 14 14 49 35 Dec 14 14 49 36 Dec 14 14 49 37 我想选择并删除 JustDec在上
  • 重用 Runnable 的最佳方式

    我有一个实现的类Runnable目前我正在使用 Executor 作为线程池来运行任务 将文档索引到 Lucene executor execute new LuceneDocIndexer doc writer 我的问题是我的 Runna
  • fancyBox 3 中的转换

    是否可以指定在 fancyBox 3 中使用哪个转换 我对 3 个转变感兴趣 打开幻灯片 画廊 在幻灯片之间导航 关闭幻灯片 图库 默认情况下 fancyBox 3 对不同类型的内容使用不同的过渡 a href img jpg img sr