javascript - fancybox 实现

Question

我是一个jquery新手，在实现花哨的盒子时遇到了很大的困难。我已按照用户指南遵循所有说明，并在互联网上搜索了许多示例。我将它绑定(bind)到代码点火器中，所以不确定这是否会产生影响。

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

我的应用程序文件夹中名为“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 View :

        <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();