Opening fancybox with boxslider for second time doesn't work properly

Question

So I've setup a fancybox with boxslider. I have some problems with the boxslider when opening the fancybox again after closing it the first time.

website (please note that the onclick is only applied to the first block (top row, most left))

The fancybox is called by the code below:

<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});">

This code works just fine when opening the fancybox for the first time but when I close the fancybox and open it again the boxslider is not working anymore like it is supposed to. It will skip some photo's and won't slide smoothly.

Any suggestions on how to fix this?

Answer 1

Like I mentioned in my comment, you need to move the fancybox init out of the inline click handler, in into your JS file.

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

And for the HTML

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

Give this a shot and let me know how it went. If you place it on the live site I can take a look at it there.