使用jQuery.fancyBox的两页视图 [英] Two-page view with jQuery.fancyBox

问题描述

我正在使用jquery和fancyBox(如果您建议，可以将其替换).

我的目标是创建一个带有下一个/上一个按钮的弹出式画廊，但是图像必须像纸质书一样按两个组显示.

我可以轻松显示fancyBox弹出窗口，并且效果很好.

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

但是，我应该在哪里显示两个页面?我相信我应该为fancyBox编写一些插件.或者，也许您可​​以提供另一种方法.

解决方案

虽然无法显示两张照片，但请记住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/

I'm using jquery and fancyBox (may be replaced if you suggest).

My goal is to create a popup gallery with next/prev buttons, but images must be shown grouped by two, just like paper book.

I can easily show fancyBox popup and it works fine.

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

But, where should i look to display pages by two? I believe I should write some plugin for fancyBox. Or maybe you can offer another way.

解决方案

While it is not possible to display two photos out of the box, keep in mind that fancyBox can display any html code! That means, you could "build" a book by some other script or by yourself and then simply call fancybox manually:

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

});

See this demo:

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

这篇关于使用jQuery.fancyBox的两页视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！