使用jQuery.fancyBox的两页视图

Question

我正在使用jquery和fancyBox（如果你建议可以替换）。

我的目标是创建一个带有next / prev按钮的弹出式图库，但图像必须按两个分组显示，就像纸质书一样。

我可以轻松地显示fancyBox弹出窗口，它工作正常。

$.fancybox( ['image.jpg', 'image.jpg'] );

但是，我应该在哪里看两页显示页面？我相信我应该为fancyBox写一些插件。或者也许你可以提供另一种方式。

Answer 1

虽然无法显示两张开箱即用的照片，但请记住fancyBox可以显示任何HTML代码！这意味着，您可以通过其他脚本或自己“构建”一本书，然后只需手动调用fancybox：

$('#start-photo-book').on('click', function() {
  var book = [];

  $.each( $("#photo-book").children(), function( key, value ) {
    book.push({
      content : $( value ).clone(), 
      type    : 'html'
    })
  });

  $.fancybox.open( book, {
    loop : false,
    smallBtn : false
  });

});

参见此演示：

http://codepen.io/fancyapps/full/OWObor/