Question

我是jquery的新手，并且在实现精美的盒子方面遇到了很大的麻烦。我根据用户指南遵循了所有说明，并在互联网上搜索了很多例子。我把它绑在代码点火器上，所以不确定这是否会产生影响。

我正在尝试将其用于简单 - 单击链接并显示包含内容和超链接的文本框。

我的所有文件都在我的应用程序文件夹中名为'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。你的语法错误了。

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

例如

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

docs

中显示了更多示例

fancybox实现

2 个答案: