使用FancyBox加载内联内容

Question 1

好吧，我只是写这篇文章，希望对可能遇到同一问题的其他人有所帮助。

供应商网站上的示例有些模糊，我假设了以下情形。

您具有href某些内容的n链接#id。

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

并且您有一个div来保存该内容。

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

然后，您只需通过1线运行Fancybox。

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

自然，您会认为Fancybox将复制内容并将其更改display: none为display: block，一切都会好起来的。

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

Question 2

解决方法很简单，但是花了我大约2个小时半的时间才找到它。

简单地包裹了你的内容（冗余） div拥有display: none和鲍勃是你的叔叔。

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

沃伊拉

Question 3

我发现此问题的方法是浏览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> 

</body>

请记住，要准确了解脚本文件放置在哪个文件夹中以及Head标记中指向的位置；他们必须对应。

Question 4

我为Wordpress用户找到的东西，

听起来似乎很明显，如果您的div基于通常会链接到新帖子页面的标头返回一些AJAX内容，则某些教程会说返回false，因为您要在同一页面上返回帖子数据，并且返回值将阻止页面移动。但是，如果返回false，则也会阻止Fancybox2执行此操作。我花了几个小时试图弄清楚那愚蠢的简单事情。

因此，对于这些类型的链接，只需确保href属性是您希望选择的哈希（＃）div，并在JavaScript中确保不要返回false，因为您将不再需要。

很简单，我知道^ _ ^