Открытие fancybox с boxslider во второй раз не работает должным образом

Question

Итак, я установил fancybox с boxslider. У меня есть некоторые проблемы с boxslider при открытии 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> 

Дайте этому выстрел, и дайте мне знать, как это пошло. Если вы разместите его на живом сайте, я могу взглянуть на него.