向turnjs“书”添加双页答案

【问题标题】：Adding double pages to a turnjs "book"向turnjs“书”添加双页
【发布时间】：2015-06-05 23:16:47
【问题描述】：

我创建了一个网站，访问者可以使用 turnjs 浏览一本书。我将页面作为双页的 jpg 格式，我希望它们能够动态加载。

代码如下：

var flipbook = $('.flipbook');  
flipbook.turn({
    elevation: 50,
    gradients: true,
    autoCenter: true,
    pages: 118,
    when: {
      missing: function (e, pages) {
        for (var i = 0; i < pages.length; i++) {
          var n = pages[i];
          if(!$(this).turn('hasPage',pages[i])) {
            var pagenum = Math.floor(pages[i] / 2) + 1,
                src="url(/pages/page_" + pagenum + ".jpg)",
                element = $('<div />',{'class': 'double', css:{backgroundImage:src}});
            flipbook.turn('addPage',element,n);
          }
        }
      }
    }
});

<div class="flipbook">
<!-- Insert content dynamically -->
</div>

不幸的是，这并没有像我想要的那样工作，这就是正在发生的事情：

我在上面发布的代码插入了页面，但是每个双页都只是缩放到其宽度的 50% 并放在一页上。例如，在第 4 页上，我应该是第 4 页和第 5 页，而在左侧页面上，我与右侧邻居相同。

我把最后一行改成flipbook.turn('addPage',element);希望它会自动添加两页，但是插入的第一页是.p113而不是.p1

我也把代码改成了

if(0 == n%2 && !$(this).turn('hasPage',pages[i])) {
  var pagenum = Math.floor(pages[i] / 2) + 1,
      src="url(/fileadmin/kollektion/2015/pages/page_" + pagenum + ".jpg)",
      element = $('<div />',{'class': 'double', css:{backgroundImage:src}});
      element.scissor();
      flipbook.turn('addPage',element,n);
  }
}

但这导致只插入左侧页面。

那么，使用addPage 动态添加双页的最佳方法是什么？我在文档或示例中找不到任何相关内容。

【问题讨论】：

标签： javascript turnjs

【解决方案1】：

由于我的页面图像被放在<div> 的背景中，因此诀窍是添加一些样式来缩放背景图像并相应地定位它们：

.double{
    background-size:200% 100%;
}

.double.even {
    background-position: 0% 0%;
}

.double.odd {
    background-position: 100% 0%;
}

【讨论】：