Question

我已为我的网站下载了一个pdf查看器（请参阅：http://codecanyon.net/item/real-3d-flipbook-jquery-plugin/4281720），我对此有疑问。

我想在这本翻书中添加大约60-70页，但我不知道如何做到这一点。我尝试了几种我在互联网上找到的解决方案，但我无法让它工作。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PDF flipbook</title>

  <link rel="stylesheet" href="./source/css/flipbook.style.css">
  <link rel="stylesheet" href="./source/css/font-awesome.css">
  <link rel="stylesheet" href="./source/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script type="text/javascript" src="./source/js/flipbook.min.js"></script>

  <script type="text/javascript">
      $(document).ready(function () {
      var options = {
        pages:[
          { src: "./source/pages/1.jpg", thumb: "./source/pages/1thumb.jpg", title:"Page 1"},
          { src: "./source/pages/2.jpg", thumb: "./source/pages/2thumb.jpg", title:"Page 2"},
          { src: "./source/pages/3.jpg", thumb: "./source/pages/3thumb.jpg", title:"Page 3"},
          { src: "./source/pages/4.jpg", thumb: "./source/pages/4thumb.jpg", title:"Page 4"}
        ],
        singlePageModeIfMobile: true,
        btnDownloadPdf : {
          enabled:false
        },
        btnToc : {
          enabled:false
        },
        btnDownloadPages : {
          enabled:false
        },
        btnPrint : {
          enabled:false
        },
        viewMode:'3d'
      };

      $("#book").flipBook(options);
    })
  </script>
</head>
<body>
  <div id="book"></div>
</body>
</html>

如何快速将/ source / pages地图中的65张图像添加到“页面”？我希望我能很好地解释它。

谢谢！

Answer 1

假设所有页面图像和标题都按顺序数字顺序排列，您可以使用一个简单的循环来生成它们：

var pageArray = [];
for (var i = 1; i <= 65; i++) {
   pageArray.push({ 
       src: './source/pages/' + i + '.jpg', 
       thumb: './source/pages/' + i + 'thumb.jpg', 
       title: 'Page ' + i 
    })
}

var options = {
    pages: pageArray,
    // other settings...
}

从数组中的文件夹中包含所有图像的最佳方法是什么？

1 个答案: