jQuery 使用 FancyBox 加载内联内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3963338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading inline content using FancyBox
提问by Marko
Well, I'm simply writing this post to hopefully help others that might come across the same issue.
好吧，我只是写这篇文章，希望能帮助可能遇到相同问题的其他人。
The examples on the vendor website are a little vague and I had assumed the following scenario.
供应商网站上的示例有点模糊，我假设了以下场景。
You have a link with a hrefn to some content's #id.
您有一个带有hrefn的链接，指向某些内容的#id.
<a href="#content-div" class="fancybox">Open Example</a>
And you have a div to hold that content.
你有一个 div 来保存该内容。
<div id="content-div" style="display: none">Some content here</div>
Then you simply run Fancybox through a 1-liner.
然后您只需通过 1-liner 运行 Fancybox。
$(".fancybox").fancybox();
Naturally, you'd think that Fancybox will copy the content and change display: noneto display: blockand everything will be ok.
自然，您会认为 Fancybox 会复制内容并更改display: none为display: block，一切都会好起来的。
But this doesn't happen.
It still loads the content but the content is hidden and you have a blank Fancybox. *cry*
但这不会发生。
它仍然加载内容，但内容被隐藏，您有一个空白的 Fancybox。*cry*
回答by Marko
The solution is very simple, but took me about 2 hours and half the hair on my head to find it.
解决方案很简单，但我花了大约 2 个小时和头上一半的头发才找到它。
Simply wrapyour content with a (redundant)divthat has display: noneand Bobis your uncle.
简单地包裹了你的内容（冗余）div拥有display: none和鲍勃是你的叔叔。
<div style="display: none">
<div id="content-div">Some content here</div>
</div>
Voila
瞧
回答by tandy
The way I figured this out was going through the example index.html/style.css that comes packaged with the Fancybox installation.
我是通过 Fancybox 安装附带的示例 index.html/style.css 来解决这个问题的。
If you view the code that is used for the demo website and basically copy/paste, you'll be fine.
如果您查看用于演示网站的代码并且基本上是复制/粘贴，您会没事的。
To get an inline Fancybox working, you will need to have this code present in your index.html file:
要使内联 Fancybox 工作，您需要在 index.html 文件中包含以下代码：
<head>
<link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a>
<div style="display: none;">
<div id="inline1" style="width:400px;height:100px;overflow:auto;">
Write whatever text you want right here!!
</div>
</div>
</body>
Remember to be precise about what folders your script files are placed in and where you are pointing to in the Head tag; they must correspond.
请记住要准确地说明您的脚本文件所在的文件夹以及您在 Head 标签中指向的位置；他们必须对应。
回答by Jamaal Okeen Ephriam
Just something I found for Wordpress users,
只是我为 Wordpress 用户找到的东西，
As obvious as it sounds, If your div is returning some AJAX content based on say a header that would commonly link out to a new post page, some tutorials will say to return false since you're returning the post data on the same page and the return would prevent the page from moving. However if you return false, you also prevent Fancybox2 from doing it's thing as well. I spent hours trying to figure that stupid simple thing out.
听起来很明显，如果您的 div 基于通常会链接到新帖子页面的标题返回一些 AJAX 内容，则某些教程会说返回 false，因为您在同一页面上返回帖子数据并且返回将阻止页面移动。然而，如果你返回 false，你也会阻止 Fancybox2 做它的事情。我花了几个小时试图弄清楚那个愚蠢的简单事情。
So for these kind of links, just make sure that the href property is the hashed (#) div you wish to select, and in your javascript, make sure that you do not return false since you no longer will need to.
因此，对于此类链接，只需确保 href 属性是您希望选择的散列 (#) div，并且在您的 javascript 中，请确保您不会返回 false，因为您不再需要。
Simple I know ^_^
简单我知道^_^
