Question

好吧，我只是写这篇文章，希望能帮助那些可能遇到同样问题的人。

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

您的某个内容href的{{1}} n链接。

#id

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

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

然后您只需通过1-liner运行Fancybox。

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

自然，您认为Fancybox会复制内容并将$(".fancybox").fancybox();更改为display: none，一切都会好的。

但这不会发生。
它仍然加载内容但内容被隐藏，你有一个空白的Fancybox。 display: block

Answer 1

解决方案非常简单，但是我头上花了大约2个半小时才发现它。

使用div和 Bob的（冗余） display: none，只需打包您的内容是你的叔叔。

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

<强>瞧

Answer 2

我想出来的方式是通过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标记中指向的位置;他们必须对应。

Answer 3

我为Wordpress用户找到的东西，

听起来很明显，如果你的div正在返回一些基于通常链接到新帖子页面的标题的AJAX内容，一些教程会说要返回false，因为你要返回post的数据相同的页面和返回将阻止页面移动。但是如果你返回false，你也会阻止Fancybox2做这件事。我花了好几个小时试图找出那个愚蠢的简单的事情。

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

简单我知道^ _ ^

使用FancyBox加载内联内容

3 个答案: