用boxslider第二次打开fancybox不能正常工作

所以我已经设置了boxslider fancybox。在第一次关闭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不再像预期的那样工作。它会跳过一些照片，不会顺利滑动。

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

来源

2016-01-23 Casper

每次点击图片时，都会创建一个fancybox的新实例。所以当你点击2次以上时，两个fancybox实例都会尝试移动图像，并且你看到的是一团糟。你需要做的是关闭窗口时停止/销毁fancybox。 – GAntoine

我想你的意思是强迫关闭fancybox（因为我没有在文档中看到停止或破坏功能）。我尝试使用$ .fancybox.close（true）强制fancybox关闭;但这并没有什么区别。 – Casper

我这样做，我会很快发布一个答案，你需要做什么。 – GAntoine

就像我在我的评论中提到的那样，您需要将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>

给这一个镜头，让我知道如何去。如果你把它放在现场，我可以在那里看看它。

来源

2016-01-24 15:00:48 GAntoine

我试过这个，但是当我第二次打开fancybox时，它不再显示图片。它只是显示一个空白区域。我已经上传了，所以你可以自己看。 – Casper

我知道了，你能否用我的更新代码更新网站代码，以便我能看到什么被调用，什么时候？ – GAntoine

完成。边注;你错过了一个。在第一个$（“img-spacer”） – Casper

用boxslider第二次打开fancybox不能正常工作

回答

相关问题