第二次使用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>

試一試，讓我知道如何進行。 如果您將其放在實時網站上，我可以在那里查看。