fancybox实现

Question

我是jquery的新手，在实现奇特的box时遇到了很大的麻烦。我已经根据用户指南遵循了所有的说明，并在互联网上搜索了许多示例。我将它绑定到代码触发器中，所以不确定这是否会有所不同。

我只是想简单地使用它--点击一个链接，然后显示一个包含内容和超链接的文本框。

我的应用程序文件夹中有一个名为“fancybox”的文件夹中的所有文件。

这是我的标题：

    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
            content:kljsadlkfajsdlfkjasdflkjads;
        });
    </script>

下面是html视图：

        <div class="resources">
            <a class="fancybox" rel="group" href="#">test</a>
        </div>

谢谢你的帮助

Answer 1

如果希望fancybox自动找到要显示的元素，请将该元素的id放在href属性中。

<a href="#box1" class="fancybox">Show box 1</a>
<div style="display:none"><div id="box1">I am in fancybox!</div></div>

和javascript：

$(document).ready(function() {
  $("a.fancybox").fancybox();
});

如果您想手动显示fancybox对话框，只需调用它：

$("#box1").fancybox();

Answer 2

错误出在调用fancybox的方式上。你把语法搞错了。

您需要将您的选项作为对象进行传递。

e.g

// Override content
$(".fancybox").fancybox({
    content: "kljsadlkfajsdlfkjasdflkjads"
});

docs中还显示了更多示例