代码之家 › 专栏 › 技术社区 › Marko

使用FancyBox加载内联内容

fancybox css html jquery

Marko · 技术社区 · 14 年前

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

供应商网站上的示例有点模糊,我假设了以下场景。

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

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

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

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

然后你只需通过一个1行程序运行FancyBox。

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

自然地 你会认为FancyBox会复制内容并改变 display: none 到 display: block 一切都会好起来的。

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

3 回复 | 直到 7 年前

121

Marko 14 年前

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

简单地包您的内容 (冗余) div 那有 display: none 和鲍勃是你叔叔。

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

沃伊拉

halfer 7 年前

我发现这一点的方法是通过示例index.html/style.css,它与FancyBox安装一起打包。

如果您查看演示网站使用的代码,并基本上复制/粘贴,您就可以了。

要使内联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标签中指向什么位置;它们必须对应。

Jamaal Okeen Ephriam 12 年前

只是我为WordPress用户找到的东西,

听起来很明显,如果您的DIV返回一些基于say-a头的Ajax内容,而这个头通常链接到一个新的文章页面,那么一些教程会说返回false,因为您返回的是同一页面上的文章数据,返回值会阻止页面移动。但是,如果返回false,也会阻止FanCybox2执行此操作。我花了好几个小时想弄清楚那件蠢事。

所以对于这些链接,只要确保href属性是您想要选择的哈希()DIV,并且在您的javascript中,确保您不再需要返回false。

简单我知道^^