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

Question

所以我用boxslider设置了一个化装箱。 第一次关闭后，再次打开fancybox时，boxslider出现了一些问题。

网站 （请注意，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初始化移出内联单击处理程序，移入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>

试一试，让我知道如何进行。 如果您将其放在实时网站上，我可以在那里查看。