使用 FancyBox 加载内联内容

发布于 2024-09-28 04:27:41 字数 741 浏览 5 评论 0原文

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

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

您有一个带有 hrefn 的链接，指向某些内容的 #id。

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

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

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

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

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

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

但这并没有发生。
它仍然加载内容，但内容被隐藏，并且您有一个空白的 Fancybox。 *哭泣*

原文

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.

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

And you have a div to hold that content.

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

Then you simply run Fancybox through a 1-liner.

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

Naturally, you'd think that Fancybox will copy the content and change display: none to display: block and everything will be ok.

But this doesn't happen.
It still loads the content but the content is hidden and you have a blank Fancybox. *cry*

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

美人迟暮 2024-10-05 04:27:41

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

只需将您的内容包裹 （冗余） div 具有 display: none 并且 Bob 是你的叔叔。

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

瞧

The solution is very simple, but took me about 2 hours and half the hair on my head to find it.

Simply wrap your content with a (redundant) div that has display: none and Bob is your uncle.

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

Voila

回复收藏 0 原文

山色无中 2024-10-05 04:27:41

我解决这个问题的方法是查看 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 标记中指向的位置；它们必须对应。

The way I figured this out was going through the example index.html/style.css that comes packaged with the Fancybox installation.

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:

  <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.

回复收藏 0 原文

心房的律动 2024-10-05 04:27:41

只是我为 WordPress 用户发现的东西，

听起来很明显，如果您的 div 返回一些基于通常会链接到新帖子页面的标头的 AJAX 内容，一些教程会说返回 false，因为您正在返回在同一页面上发布数据和返回会阻止页面移动。然而，如果你返回 false，你也会阻止 Fancybox2 做它的事情。我花了好几个小时试图弄清楚这个愚蠢而简单的事情。

因此，对于此类链接，只需确保 href 属性是您希望选择的散列 (#) div，并在您的 javascript 中确保您不会返回 false，因为您不再需要这样做。

简单我知道^_^

回复收藏 0 原文

~没有更多了~