Question

HTML

<div class="test">
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
</div>

JQuery - 已更新

$('.fancybox').each(function(){
            $(this).fancybox({
                type: 'ajax',
                autoHeight: true,
                width: 930,
                autoSize: false,
                autoCenter: true,
                fitToView: false,
                topRatio: 0,
                arrows: false,
                closeBtn: true,
                closeClick: true,
                autoPlay: false,
                openSpeed: 1,
                closeSpeed: 'fast',
                closeClick: false,
                live: true,
                helpers: {
                    overlay: {
                        openSpeed: 'fast'
                    }
                }
            });
        });

Jsfiddle demo

仅尝试

$('.fancybox').fancybox();

首次点击的链接将会打开fancybox。然后，下一个点击的链接将无法打开fancybox，只显示空白叠加层。

注意到如果使用parent.location.reload(true);，则通过刷新整个页面然后显示fancybox来工作。那不是我想要的。它应该每次点击不同的链接时工作，并显示fancybox而不刷新。

想到ajax它可以让href处理然后显示fancybox但是它不起作用:(

另一件事是Fancybox似乎不止一次初始化。如何防止它被多次初始化？

收到错误：`未捕获TypeError：$（...）。fancybox不是函数

有没有办法让fancybox无需每次点击链接时刷新页面都能正常工作？

更新

我编辑了上面的代码，它仍然给我带来麻烦。

Answer 1

我认为您的问题是您正在处理多个ajax请求。

Fancybox只需使用：

即可支持ajax

$("#various3").fancybox({
        ajax : {
            type    : "POST",
            data    : 'mydata=test'
        }
    });

并在其中查看通过AJAX调用的href属性中已处理文件的结果。

因此，在您的代码中，您不需要处理jquery ajax并在其中调用fancybox。相反，你可以在ajax模式下调用fancybox，这可以解决问题。

您可以查看Official FancyBox Site以便用它处理AJAX。

至于初始化，这实际上取决于你的fancybox js脚本加载。 fancybox javascript文件应在您的页面中加载一次。

多次在html元素上使用$(element).fancybox({})不会重新初始化元素中的当前对象，但会使用新调用重置它。换句话说，fancybox对象在元素中被覆盖。

已更新：

这是一个工作副本，只需在链接点击时使用$.fancybox({})，防止默认事件行为并将所需位置设置为href元素本身，请确保只导入一次jquery以便不会覆盖它：

<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>


<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

<div class="test">
<a href="/example/123.html" class="fancybox_ajax"> link 1</a>
<a href="/example/123.html" class="fancybox_ajax"> link 2</a>
<a href="/example/1236.html" class="fancybox_ajax"> link 3</a>
</div>

<script type="text/javascript">
        $(document).ready(function() {
    $('.fancybox_ajax').on('click', function(e){
                    e.preventDefault();

                    $.fancybox({
                        width: 400,
                        height: 400,
                        autoSize: false,
                        href: $(this).attr("href"),
                        type: 'ajax'
                    });
                });

});
    </script>

上次更新 - 修复jquery冲突问题

我通过为jquery库设置一个新别名来实现这一点，$似乎与之后加载的另一个javascript库发生冲突，而且它没有找到fancybox插件.. newFiddle

未捕获的TypeError：$（...）。fancybox不是函数

1 个答案: