使用FancyBox加载内联内容

那么,我只是写这篇文章,希望能帮助其他可能遇到同样问题的人。

供应商网站上的例子有点含糊,我假定了以下情况。


你有一个href链接到某些内容的#id

 <a href="#content-div" class="fancybox">Open Example</a> 

你有一个div来保存这个内容。

 <div id="content-div" style="display: none">Some content here</div> 

然后你只需运行Fancybox通过一个class轮。

 $(".fancybox").fancybox(); 

当然 ,你会认为Fancybox会复制内容和更改display: none display: block ,一切都会好的。

但是这不会发生。
它仍然加载的内容,但内容是隐藏的,你有一个空白Fancybox。 *cry*

解决方法非常简单,但是把我头上约2个半小时的头发find了。

简单地用一个(多余的) div包装你的内容,其中display: noneBob是你的叔叔。

 <div style="display: none"> <div id="content-div">Some content here</div> </div> 

我花了很多时间试图解决这个问题,而且我所做的是通过Fancybox安装打包的示例index.html / style.css。

如果您查看演示网站使用的代码,基本上复制/粘贴,你会没事的。

要使内联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> 

请记住准确地说明脚本文件放置在哪个文件夹以及您在Head标签中指向的位置; 他们必须对应。

我希望这有帮助。

只是我发现的WordPress的用户,

听起来很明显,如果你的div根据通常链接到一个新的post页面的标题返回一些AJAX内容,一些教程将会说因为你将post数据返回到同一页面而返回false,返回将阻止页面移动。 但是,如果您返回false,则还会阻止Fancybox2执行此操作。 我花了几个小时试图弄清楚这个愚蠢的简单的事情。

所以对于这种types的链接,只要确保href属性是你希望select的哈希(#)div,并且在你的javascript中,确保你不再返回false,因为你不再需要。

简单我知道^ _ ^