Question

所以我用boxslider设置了一个fancybox。我在第一次关闭它后再次打开fancybox时遇到了一些问题。

website（请注意，onclick仅适用于第一个块（顶行，最左侧））

下面的代码调用fancybox：

<div class="img-spacer" onclick="$.fancybox({href : '#portfolio-1', width: 1040, margin: 0, padding: 0, closeBtn: false}); $('.bxslider').bxSlider({auto: true,controls: false,pager: false});">

这个代码在第一次打开fancybox时效果很好但是当我关闭fancybox并再次打开它时，boxslider就不再像它应该的那样工作了。它会跳过一些照片而不会顺利滑动。

有关如何解决此问题的任何建议吗？

Answer 1

就像我在评论中提到的那样，你需要将fancybox init从内联点击处理程序移到你的JS文件中。

$(document).ready(function() {
    // Attach fancybox to every .image-spacer div
    $("img-spacer").fancybox({
        href : '#portfolio-1', 
        width: 1040, 
        margin: 0,
        padding: 0,
        closeBtn: false,
        onUpdate: function() {
            alert('update!');
        },
        onCancel: function() {
            alert('cancel!');
        },
        onPlayStart: function() {
            alert('play start!');
        },
        onPlayEnd: function() {
            alert('play end!');
        },
        beforeClose: function() {
            alert('before close!');
        },
        afterClose: function() {
            alert('after close!');
        },
        beforeShow: function() {
            alert('before show!');
        },
        afterShow: function() {
            alert('after show!');
        },
        beforeLoad: function() {
            alert('before load!');
        },
        afterLoad: function() {
            alert('after load!');
        }
    });

    // On clicking a .img-spacer div, attach a bxSlider
    $(".portfolio").click(function(){
        $('.bxslider').bxSlider({
            auto: true,
            controls: false,
            pager: false
        });
    });
});

对于HTML

<div class="img-spacer"></div>

试一试，让我知道它是怎么回事。如果你把它放在现场，我可以在那里看一下。

使用boxslider第二次打开fancybox无法正常工作

1 个答案: