在fancybox之外添加自定义html
Fancybox 是一个流行的 jQuery 插件，用于创建响应式的灯箱效果。你可以在 Fancybox 弹出窗口之外添加自定义 HTML 内容，以实现更复杂的布局和功能。以下是如何在 Fancybox 之外添加自定义 HTML 的步骤和示例代码。
步骤
- 引入 Fancybox：确保你已经引入了 Fancybox 的 CSS 和 JavaScript 文件。
- 创建 HTML 结构：在你的 HTML 文件中创建 Fancybox 弹出窗口和自定义 HTML 内容。
- 初始化 Fancybox：使用 jQuery 初始化 Fancybox。
- 添加自定义 HTML：在 Fancybox 弹出窗口之外添加自定义 HTML 内容。
示例代码
以下是一个完整的示例，展示如何在 Fancybox 弹出窗口之外添加自定义 HTML 内容。
1. 引入 Fancybox
在你的 HTML 文件中引入 Fancybox 的 CSS 和 JavaScript 文件。你可以从 Fancybox 官方网站 下载这些文件，或者使用 CDN。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancybox with Custom HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<style>
/* 自定义样式 */
.custom-html {
position: fixed;
top: 10px;
right: 10px;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
z-index: 9999; /* 确保在 Fancybox 之上 */
}
</style>
</head>
<body>2. 创建 HTML 结构
在你的 HTML 文件中创建 Fancybox 弹出窗口和自定义 HTML 内容。
<!-- 自定义 HTML 内容 -->
<div class="custom-html">
<h3>Custom HTML Content</h3>
<p>This is some custom HTML content outside of Fancybox.</p>
</div>
<!-- Fancybox 触发器 -->
<a data-fancybox="gallery" href="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/150" alt="Thumbnail">
</a>
<!-- Fancybox 弹出窗口内容 -->
<div style="display: none;" id="fancybox-content">
<h2>Fancybox Content</h2>
<p>This is the content inside the Fancybox.</p>
</div>3. 初始化 Fancybox
在你的 HTML 文件中初始化 Fancybox。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
$(document).ready(function() {
$('[data-fancybox="gallery"]').fancybox({
// 你可以在这里添加 Fancybox 的配置选项
});
});
</script>
</body>
</html>解释代码
- 引入 Fancybox：在
<head>部分引入 Fancybox 的 CSS 文件，并在<body>底部引入 jQuery 和 Fancybox 的 JavaScript 文件。 - 创建 HTML 结构：在
<body>中创建一个包含自定义 HTML 内容的<div>，并设置其样式使其固定在页面的右上角。创建一个 Fancybox 触发器和一个隐藏的 Fancybox 弹出窗口内容。 - 初始化 Fancybox：使用 jQuery 初始化 Fancybox，并为触发器设置
data-fancybox属性。
运行效果
当你点击缩略图时，Fancybox 会弹出一个窗口显示大图和弹出窗口内容。自定义 HTML 内容将始终显示在页面的右上角，不会被 Fancybox 覆盖。
相关·内容
我希望按钮从fancybox按钮助手显示在下面的图像，而不是在顶部。我试过使用position：'bottom‘，但按钮仍然在图像的顶部。我不知道这个职位应该做什么。
这是我的代码。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fancybox attempt 1</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
浏览 0提问于2013-05-30得票数 1
回答已采纳
我正在将新的图像添加到DOM到这个DIV中...
<div id="photoArea"></div>
然后我像这样加载新的图像。
function showImages(token,status){
var jqxhr = $.getJSON("/api/1/photos/show.json/?callback=?",{
token: token,
status_id: status,
},function(data) {
var html = "";
$.each(data.photos, f
浏览 2提问于2012-03-29得票数 0
1回答
我使用Fancybox 2.0.6同时显示图像和视频。当滚动图像/视频(当一个图库中有多个图像)时，Fancybox会显示前面和下一个图标和链接。按jquery.fancybox.css的说法，可点击区域占图像/视频左侧和右侧的40%。这对于图像来说很棒，但是对于视频来说，它会阻塞播放按钮，这样用户就可以进入下一个/prev视频，而不是能够播放或暂停视频。我想改变可点击区域的宽度，但只对视频-我希望它保持不变的图像。我对Fancybox进行了研究，发现我可以使用wrapCSS为Fancybox的多个实例创建自定义样式，但我无法让它工作。
这是我的js电话
<script type=
浏览 3提问于2012-07-25得票数 4
在中，不需要通过javascript初始化fancybox。只需将html属性data-fancybox=""设置为锚，就可以将其作为fancybox打开。
好的!现在我想在上调用一个函数，在关闭之后，但是当我没有初始化函数时，我不知道该如何做？文档建议使用以下方法，但它只适用于具有初始化的方法：
$("[data-fancybox]").fancybox({
afterClose : function() {
//Something;
}
});
这是我的示例html链接，它打开一个没有额外javascript的fancybox
浏览 5提问于2017-06-18得票数 0
回答已采纳
努布的问题。
我有个链接
<a href="/page.html">Link</a>
我有一个page.html
<div id="one">
<div id="two">
something
</div>
</div>
如何使用Fancybox3 ajax 加载#2 div，而不改变链接，方法是向"data-fancybox“或"href=”等数据属性中添加"data-src=“覆盖。
对不起，我的英语:)
浏览 2提问于2017-05-25得票数 0
3回答
我使用的是fancybox iframe (可以在iframe演示中看到)
下面是我使用的代码
<p><a class="fancybox fancybox.iframe" href="items/item1.html"><span>Item 1</span></a>
然后我有一个item1.html，它包含以下代码：
<h3>Item 1</h3>
Blah blah blah text here
<a href="http://www.google.com&
浏览 3提问于2012-05-30得票数 0
回答已采纳
1回答
我正在使用base64字符串在fancybox3中打开一个PDF。它打开PDF，但实际的页面看起来非常非常小。如果我放大几次，它们就会显示得很好。有没有办法在open function中将缩放设置为100
$.fancybox.open({
content: '<iframe width="80%" height="90%" src="data:application/pdf;base64,' + data + '" />',
浏览 2提问于2018-08-02得票数 0
我目前正在尝试将社交分享按钮集成到我的fancybox图像弹出窗口中。Fancybox已经创建了一个来演示如何使用“done...but”> jquery.fancybox-buttons.js ()来实现。我如何组合这两个自定义解决方案，以便当fancybox图像弹出时，它下面有社交分享按钮(就像在JSFiddle中一样&有按钮助手吗？
下面是我的页面的Fancybox Gallery的HTML示例：
<div id="painting" class="content-pages">
<p>
<a clas
浏览 3提问于2013-02-06得票数 1
回答已采纳
1回答
有没有人在jQuery 1.9.1上安装了fancybox 2.1.4 ()的最新版本，以便与Microsoft Office SharePoint Server (MOSS) 2007一起使用？
似乎MOSS2007的开箱即用的css/html干扰了fancybox/jQuery所做的大小和定位计算。最终结果是一个很小的fancybox (130px宽度)。
这是这个问题的屏幕截图：
下面是我正在做的超级简单的代码：
主页：
<%@ Page language="C#" MasterPageFile="~masterurl/default.master"
浏览 1提问于2013-05-21得票数 0
1回答
如何使用firebase函数提供位于我的blog文件夹中的index.html文件。
这是我的文件树
FirebaseWebsite
│
├── blog
│ ├── index.html
│ ├── css
│ │ ├── fonts
│ │ │ ├── FontAwesome.otf
│ │ │ ├── fontawesome-webfont.eot
│ │ │ ├── fontawesome-webfont.svg
│ │ │ ├── fontawesome-webfont.ttf
浏览 26提问于2018-06-19得票数 0
我正在使用带有iframe的Fancybox 2，但我对JQuery没有经验。我有不同的样式iframe的类，我想用JS做一些常规设置。
我可以用以下命令调用一个特定的iframe-class：
$(".my_iframe").fancybox({
所以我需要像这样的东西：
$(".fancybox.iframe").fancybox({
在FancyBox2的官方演示中，描述了类"fancybox.iframe“将类型设置为iframe。这适用于以下html：
<a class="fancybox.iframe my_iframe"
浏览 2提问于2012-05-18得票数 0
总之，我有以下代码来显示一组instagram照片，然后我用fancybox在我的网站上打开它们：
$output .= '<script type="text/javascript">
jQuery(document).ready(function($) {
$(".fancybox").fancybox();
});
</script>';
$output .= '<div id="bd-instagram">';
for($i=0; $i<$count;
浏览 0提问于2013-02-28得票数 0
回答已采纳
我正在使用Fancybox作为灯箱。我在外部html文档中设置了视频，并在从主文档中单击链接时加载到Fancybox中。问题是Fancybox以某种方式阻止了Chrome中的“自动播放”。火狐似乎工作得很好。
From index.html
Fancybox script:
<script type="text/javascript">
$(document).ready(function() {
$(".video").fancybox({
'overlayOpacity': 0.9,
'hideOnContentClic
浏览 0提问于2012-02-17得票数 1
回答已采纳
我使用fancybox来显示包含表单的iFrame。当表单提交时，我关闭fancybox，如下所示：
parent.jQuery.fancybox.close();
然后，我在afterClose事件上做一些AJAX操作。
我遇到的问题是，如果有人通过单击“关闭”按钮或单击fancybox外部的调光器关闭fancybox，那么它仍然会调用afterClose函数中的AJAX函数。
如何检测fancybox是如何关闭的，并且只有在fancybox已经关闭时才运行afterClose函数：
parent.jQuery.fancybox.close();
我仍然需要给我的用户关闭fancybox的选
浏览 7提问于2015-09-17得票数 0
5回答
我想在fancybox-inner类上应用Css，这是类主内容的最后一个父类。我不想直接定义类并应用属性。因为我有多个同名的类，即fancybox-inner.因此，我想代表fancybox-inner针对main-content。
HTML:
<div class="fancybox">
<div class="fancybox-inner">
<div class="main-content">
<!--- Some Content ------>
<
浏览 4提问于2014-03-19得票数 0
使用提供的Fancybox版本2
我想从我的主页打开一个fancybox，但是在第一个花哨的box中可以调用第二个fancybox。但是当第二个花哨的盒子关闭的时候。我希望它重新打开第一个fancybox，而不是简单地关闭它(在角落按X键或按Esc键)。我该怎么做呢？
谢谢-我已经在互联网上搜索了答案，但找到的答案适用于fancybox的以前版本，而不是新版本(2.0)……
我的代码如下：
主页-
<!DOCTYPE html>
<head>
<!-- Add jQuery library -->
<script type="t
浏览 4提问于2012-06-11得票数 1
回答已采纳
1回答
()
<html>
<head>
<title>Tester</title>
<link rel="stylesheet" href="helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(functi
浏览 0提问于2012-04-22得票数 0
回答已采纳
1回答
我正在做一个引导网站，当用户点击登录/注册链接时，我希望弹出一个模式窗口，但是我认为代码有问题，因为连链接都没有响应。下面是代码。
每次我点击任何一个模式以一种有趣的方式出现的链接，我甚至尝试从一个不同的文件中包含它，但链接也没有响应。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Heart2Heart</title>
<meta name="viewport"
浏览 2提问于2017-07-28得票数 1
回答已采纳
当我尝试加载一个html页面时，我遇到了fancybox的问题。
我有一个链接
<a href="testPage.html" id="chal">Load testPage.html in fancybox</a>
然后将其绑定到fancybox的js
$('a#chal').fancybox({
padding: 0,
margin: 0,
showCloseButton: true,
scrolling: 'no',
opacity: 0.5,
cent
浏览 1提问于2011-04-11得票数 0
1回答
我在一个显示弹出图像的图片库中使用fancybox 2.1.4。根据默认设置，fancybox中包含弹出式图像的框的位置将出现在屏幕窗口上。是否有可能使弹出图像框出现在html页面上，而不是屏幕上？在哪里修改这个弹出的位置行为？是用jquery.fancybox.js还是jquery.fancybox.css？因为我似乎找不到使其默认修复到屏幕上的“修复”规则。
浏览 3提问于2013-03-25得票数 1
我有一个简单的图片库，用户可以点击缩略图，Fancybox将打开全尺寸的图像。太好了，它起作用了。现在，我想添加一些自定义的HTML，以便图像包含在一个包装器中，该包装器将标题放在底部，照片的注释放在照片的右侧(比如facebook)。我该怎么做呢？我已经尝试了几个小时来弄清楚如何做到这一点，我所能做的就是用Fancybox打开原始照片。下面是我使用的代码：
$(document).ready(function() {
$(".fancybox-button").fancybox({
padding : 0,
prevEffect
浏览 2提问于2012-07-06得票数 3
1回答
我正在尝试使用Isotope将我的图库过滤成类别，然后打开Fancybox，只将过滤后的类别显示在FancyBox中。
下面是我的代码：
HTML
<div class="filters">
<div class="ui-group">
<div class="button-group js-radio-button-group" data-filter-group="color">
<button class="button" data-filte
浏览 2提问于2017-03-04得票数 0
回答已采纳
我正在使用Fancybox打开一个弹出窗口，允许用户在两种不同的登录站点方法之间进行选择。我想单击Fancybox中的任何一个链接来关闭fancybox，然后在父网页中打开该链接。
这个是可能的吗？
下面是我打开FancyBox盒子的方法：
$("#logonChooser").click(function () {
$.fancybox.open({
href: 'LogonChooser.html',
type: 'iframe',
浏览 3提问于2012-05-22得票数 4
回答已采纳
我试图看看是否可以通过html或使用某种javascript在图像的'alt‘标记中添加html代码。我正在使用fancybox作为我的图像画廊。我试图使用fancybox作为一个表单来显示图像，并在图像的描述中添加带有样式的信息(如项目点和断点)，并添加一个按钮，将您带到另一个页面。目前，我的按钮正常工作，但该按钮在javascript中，因此每个fancybox图像都有该按钮和相同的url。我希望每个图片上的每个按钮都有不同的链接。
下面是我拥有的javascript，它当前在fancybox的图像下显示alt文本。
$(".fancybox").fancybox(
浏览 4提问于2013-09-17得票数 0
回答已采纳
1回答
我正在尝试使用Fancybox中的自定义复选框。它们出现了，但不起作用(不可检查)。
$(document).ready(function() {
$("#fnc").live("click", function(){
$.fancybox($("#hidediv").html(),{
'speedIn' : 600,
'speedOut' : 200,
'overlayShow&
浏览 0提问于2012-06-15得票数 0
回答已采纳
1回答
我对带有自定义导航的Fancybox使用了自定义标题。问题是，当我单击下一步/上一步默认按钮时，加载图标不会显示，但当我单击自定义导航/上一步按钮时，加载图标总是在图像之间显示。请看这里- ，代码如下：
function formatTitle(title, currentArray, currentIndex, currentOpts) {
if(currentArray.length==1) {
return '<div id="custom-title"><span><a href="javascrip
浏览 8提问于2012-03-14得票数 0
1回答
我一直在寻找这个话题，我相信有一个解决办法，但我不是在寻找正确的东西.
我使用的是一个自定义版本的Twitter引导2.x (流体响应)，顶部和底部全宽度固定导航条和Fancybox 2.1.4
<meta name="viewport" content="width=device-width, initial-scale=1.0">
bootstrap.min.css
bootstrap-responsive.min.css
modernizr-2.6.2-respond-1.1.0.min.js
jquery.fancybox-media.js?
浏览 0提问于2013-07-31得票数 1
回答已采纳
1回答
使用带或不带鼠标轮插件的FancyBox v2.0.6。如果用户打开FancyBox，滚动到内容的末尾，然后继续滚动，则父页面将滚动。
这可能会让人感到不安，因为当用户关闭FancyBox时，它们在父页面上的位置并不相同。
有没有办法在FancyBox打开时阻止父页面滚动？
浏览 0提问于2012-08-12得票数 0
回答已采纳
2回答
当点击视频链接时，我需要在fancybox中显示一个html5视频。如果乍一看，这可能是一个已经回答的问题，请再读一遍，因为我已经对15个失眠小时进行了广泛的研究。唉哟。
这是我的页面：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
浏览 3提问于2014-01-20得票数 2
回答已采纳
1回答
我花了好几个小时想办法弄清楚这该死的东西。如果您转到，然后单击该图像，就会成功地弹出一个Fancybox w/红色覆盖。问题是，当你向下滚动到底部时，Fancybox亲吻浏览器的底部，没有空间。我要那里有空间！
我试图将bottom:20px;或padding: 0 0 20px 0;添加到<div class="fancybox-wrap fancybox-desktop fancybox-type-image fancybox-opened"</div>类中，但得到了ZIP！
我真的很感激你的时间，不像我，我希望你能找到解决办法。
P.S. -抱歉没有js
浏览 0提问于2014-05-26得票数 2
回答已采纳
1回答
在我的中，我有一些图像，我将它们显示在fancybox中。一切正常，但现在网站的要求是有一个全屏模式的照片，我的意思是全屏是什么，我想在我的fancybox底部添加一个按钮，当用户点击该按钮时，当前图像(fancybox图像)必须在全屏模式下显示。
全屏示例：
但是这个例子不适合我的情况，因为在全屏模式之前我仍然需要fancybox。
所以有人有一些代码要分享，或者有一些很好的库，我可以通过jQuery、Fancybox和一些全屏应用程序接口进行集成？谢谢
浏览 0提问于2011-07-06得票数 4
回答已采纳
2回答
我正在尝试自定义FancyBox 2，以便在图像上悬停时不显示标题属性。现在，设置它的方式是让组中的第一个图像显示在页面上，当您单击它时，fancybox将加载，您可以滚动查看其他图像。我不希望它们全部显示在页面上，只是第一张图片。我是通过隐藏第一个之后的锚来做到这一点的(我没有在FancyBox的网站上看到如何做到这一点的例子，所以这是我的第一次倾向，它起作用了)
我的HTML
<li class="web">
<a href="img/sites/salonantebellum.jpg" class="thumb web fan
浏览 3提问于2012-05-30得票数 0
1回答
我正在尝试将Fancybox 3集成到我的应用程序中。在这个过程中，我创建了一个自定义按钮，该按钮基于该实例处理函数，它需要有关该实例的其他数据，例如该实例的photoId和settingsId。例如：
HTML:
在这个HTML中，我希望为自定义的fancybox按钮方法中使用的每个实例传递一个像{photoId : 1, settingsId: 30}这样的对象数据。
<a class="fbelements" href="http://example.com/img1.jpg" data-caption="Image 1">
&
浏览 2提问于2019-07-17得票数 0
回答已采纳
帮助!
在运行jquery.tabSlideOut.v1.3.js和fancybox时遇到问题。他们都在一起工作，但不在一起。
奇特的盒子在这里工作得很好，带有滑出的DIV注释掉了
但是当我为tabslideout添加DIV时，fancybox 'pop‘将不起作用
me 50.00给任何能帮我解决这个问题的人:-)
浏览 0提问于2013-11-28得票数 1
2回答
我不能让这些基本代码在fancybox3上工作。它不是在加载js库吗？
原始网站在这里：
<!doctype html>
<html><head>
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancy
浏览 0提问于2017-03-17得票数 0
非常简单的test.html页面：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="f
浏览 0提问于2012-12-14得票数 15
回答已采纳
2回答
为什么FancyBox不能工作？
、、、、
我有一个客户，我正在为其制作一个电子商务网站，我正在尝试使用FancyBox来更好地设计。我已经在这上面工作了将近三天了，我无论如何也不能让它工作。我阅读/观看了教程，复制和粘贴了代码，做了所有我能想到的让它运行的事情。这不是我在这里一次又一次看到的关于一个图像正确显示的问题，或者没有正确链接的问题。什么都没发生。当最初的临时服务器意外重置其权限时，我甚至切换了临时服务器。当链接被双引号括起来时，服务器也退步到无法读取它们，所以在切换到单引号后，我知道它们是连接的。所有的图片，CSS，Javascript，jQuery和插件现在都可以正确链接了。现在的问题是FancyBox是否被调用，和/或J
浏览 3提问于2013-06-06得票数 0
回答已采纳
2回答
我正在尝试在iframe中打开登录表单。如果用户单击提交按钮时登录成功，我希望iframe关闭并将浏览器重定向到index.php。问题是我不知道如何从这一点上关闭iframe。
下面是我拥有的与iframe相关的代码：
login.tmpl (表单所在的html文件)
<div class="form_item submit_button">
<button type="submit" name="submit">Login</button>
</div>
login.php (我在这里重定向
浏览 0提问于2013-02-25得票数 0
回答已采纳
2回答
我在试着用超大型和fancybox的仪器。我在supersized.js中添加了一些html，以便在默认的标题框(即div id=slidecaption )中用fancybox显示图像。
一切正常，但当fancybox打开/关闭时，我试图停止并重新启动超大型幻灯片。
此代码可以很好地阻止幻灯片显示：
<script type="text/javascript">
jQuery(document).ready(function(){
$('#slidecaption').click(function() {
api.playToggle();
});
浏览 4提问于2013-10-31得票数 0
回答已采纳
这里有一个使用FancyBox的简单示例
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#fbLink1').fancybox({
'afterLoad': function() {
$('#fancyboxdiv').html('<h1>Fancybox first
浏览 1提问于2013-03-23得票数 0
我有以下简单的代码，当单击"Open Window“时在fancybox中显示图像。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
浏览 0提问于2013-12-06得票数 0
1回答
我使用Fancybox v2.1.5-0并尝试将内容绑定到另一个div中。
内容图像已经在HTML页面中的另一个div中。
这里是我的HTML代码：
Bootstrap 3 carousel
---------------------------------------------------------------
<div class="hotelsd-img">
<div id="photoCarousel-1" class="carousel slide" data-ride="carousel">
浏览 0提问于2015-11-01得票数 3
我正在使用fancybox jQuery插件作为我的照片画廊网站。Fancybox运行良好，但是当您悬停在图像的左三分之一时，只有后箭头显示(照片的左三分之一消失)；图像的右三分之一会发生错误的事情。我怎么才能解决这个问题？似乎没有任何fancybox属性来控制这个..。
这是jQuery：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$(".fancybox").fancy
浏览 4提问于2013-04-29得票数 0
回答已采纳
我的页面上有iframe fancybox。在子页面上，当点击add Button时，我向DB添加了一些东西。在这个过程之后，我想关闭fancybox并重新加载父页面。我该怎么做呢？
浏览 5提问于2013-01-10得票数 0
1回答
我想在fancybox中添加一个分页。但是对于这里描述的clickevent：什么都不起作用。
下面是我的js代码：
onComplete: function(){
$(".fancybox-nav").click(function(){
console.log("it works");
var $that = $(this);
var nav = $that.attr('class');
var number = $('.fancyb
浏览 0提问于2012-05-29得票数 1
回答已采纳
1回答
我遵循这个jsfiddle中的代码，并在一个html文件中编写了所有的东西。
缺少什么，因为它不工作，如jsfiddle所示？
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<a class="fancybox-thumbs" data-fancybox-group="thumb1" href="
浏览 1提问于2016-11-21得票数 0
我不知道这是个bug，还是fancybox不允许的东西。有一个包含HTML元素的图库是可行的吗？我从几个小时以来一直在试着去做，但却找不到好办法。
HTML：
<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a>
<div class="content">my content 1</div>
<a href="#" class="fancy
浏览 2提问于2014-01-29得票数 1
回答已采纳
当我点击时，我有一个加载程序覆盖显示。但是始终有一个fancybox类添加到它中。
这是。
<div class="loading hide">Loading…</div>
<a class="fancybox fancybox.ajax" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
click me
</a>
$('.fancybox').fancybox({
beforeLoad: f
浏览 5提问于2015-02-02得票数 1
回答已采纳
我使用的是fancybox版本2.1.5。当我打开fancybox时，我注意到.fancybox-wrap div位于.fancybox-overlay div中。如果我在同一页上打开另一个fancybox，那么.fancybox-overlay div现在就在.fancybox-环绕div之上。
我对第一个和第二个fancybox的定义是相同的，其定义如下：
$.fancybox({
href : '#my_div',
autoSize : true,
fitToView : false,
padding : 0
浏览 1提问于2013-07-29得票数 2
回答已采纳
在处理fancybox中的iframe的动态大小时，我意外地发现，在阅读之后，在[data-fancybox]上设置data-width和data-height是有帮助的。
Exmaple HTML元素：
<a data-fancybox data-width="<?= $banner_width; ?>" data-height="<?= $banner_height; ?>" data-src="example.com" href="javascript:;">example.com<
浏览 2提问于2017-05-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
