问题标签 [turnjs]

我正在制作一本数字杂志。几乎完成了，除了最后一部分。TurnJS 有这个区域功能，您可以在其中定义图像上的可点击区域并执行诸如转到 URL 或转到特定页面之类的操作。目标是触发包含 youtube 视频的 fancybox。

这是我到目前为止所拥有的：

12-regions.json：

Fancybox 触发器：

这是它的样子：

点击“观看独家视频”应调用 Fancybox。

这是生成的turnjs的区域元素：

我会错过什么？每当我单击所述区域时，它只会打开一个新选项卡并在那里加载视频。

希望你能帮我解决这个问题。提前致谢！

我正在尝试 使用一些特殊效果自定义TurnJS 。<input type="text" id="pageNumber" value="">我需要在将每一页翻转到一个字段时显示当前页码。

该值应通过此功能获得（添加了测试警报）：

我怎样才能得到这个值到该<input>领域？

我可以使用这个：获取输入文本框中的值吗？

当用户在页面之间切换时，我有一个没有任何效果或动画的 .epub 文件

我使用Turn.js库，因为它不起作用。我无法用电子书阅读器软件打开它。

这是我的 Epub 文件夹目录

添加 Turn.js 库之前

添加 Turn.js 库后

这是我的chap_0001.xhtml Html 代码

这是我的chap_0001.xhtml Js 代码

我只复制库文件夹并更改 chap_0001.xhtml 文件。而已。

任何帮助将不胜感激

我正在使用 turnjs 从 SQL 图像中翻转图像。来自 SQL 的图像存储在 PHP 数组中。我想在 Javascript 中访问图像 PHP 数组并为每个图像创建 bloburl。然后，bloburl 将保存在options数组中。然后，我遍历options数组以：

• 创建 div

• 将 bloburl 添加到 div 通过d.style.backgroundImage = "url(" + options['pages'][0] + ")";

• 将 div 附加到<div class="container">

但是，我在访问 Javascript 中的 PHP 图像数组时遇到了问题var array_sql_imgs = <?php echo JSON_encode($array_image) ?>;。

当我执行时它显示空结果console.log(array_sql_imgs);。当我尝试访问时$test_array=array('a','b','c');。它显示正确的结果。

我想在同一文件中使用 pdfjs 将 tcpdf 输出显示为翻书。

方法1：仅使用Turnjs（像我们对blob图像一样尝试）-不成功

首先，我base64从$pdf->Output('', 'E');. 然后，我转换为blob并创建url. 我创建的 pdf 文件包含两页。我无法在 turnjs 中预览。之后，我使用 id(flipbook) 将 url 传递给 div 内的 div。但是，翻书没有显示内容。

方法2：使用带有turnjs和pdfjs库的PDF翻书转换器。-成功

我把它url (php file output pdf to browser using tcpdf) as default url放在 viewer.js 中。该方法可以成功运行。

如果可能的话，我想将 turnjs 与 pdfjs 结合在同一个文件中。创建 tcpdf 输出后，turnjs 和 pdfjs 使用同一文件中的该 blob 输出显示为翻书。

预先感谢。

我正在使用 turnjs 从 pdf blob 创建翻书。我为每个页面创建 blob 图像 url canvas.toBlob，将该 url 添加到 div 并将该 div 放在翻书 div 中。但是，我收到此错误：

TurnJsError:第1页不存在

我用同样的方法从 blob 图像创建翻书。即运行成功。当我在检查元素选项卡中进行比较时，我发现具有 blob 源的 div 缺少两个外部 div 层 ( <div class="page-wrapper" page="1" style="position: absolute; overflow: hidden; width: 461px; height: 600px; top: 0px; right: 0px; left: auto; z-index: 2;">, <div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 757px; height: 757px;">)。我认为当我们将带有 div 的图像添加到动画书 div 时，这会自动创建，因为我没有在动画书中从 blob 图像执行任何额外操作以使其运行。我将附上这两个代码。

来自 blob 图像的动画书

来自 Pdf blob 的动画书

提前致谢。

我想从没有封面的第一页添加来自 pdf 的动态页面。但是，我无法在没有页面的情况下创建 turnjs 实例（封面页已在 html 中硬编码）。它输出错误：

未捕获（承诺中）b {name：“TurnJsError”，消息：“第 1 页不存在”}

但是，我们不能在没有声明 turnjs 实例的情况下使用 turnjs 的 addpages 方法。如何做到这一点？

目前，我在 html $('#book') 中对封面页进行了硬编码。

然后，我创建 turnjs 实例如下：

然后，我通过以下方式删除封面：

之后，我开始从 pdf 添加页面。所以，它符合我的要求。

完整代码

但是，我仍然想知道如何创建没有页面的 turnjs 实例并在添加所有页面后显示为翻书。

嗨，我正在尝试使用 ' turnjs' 和 ' pdf.js' 构建一本翻书。我能够通过本地 pdf 文件以及在线 pdf url 构建翻书，当我尝试使用 pdf blob url 时，它显示如下错误

但是当我尝试使用window.open我能够在新窗口中查看 pdf 打开这个 url 时。

这是我的代码

我是新手，我需要一些帮助。首先抱歉我的英语不好。我的主页是一张图片。我在这个页面上有一些品牌。例如：

• 一个
• b
• C

我想当我单击图像时转到第 1 页，当我单击 b 图像时转到第 2 页。我需要这样的图像映射和链接。您可以发送这样的示例或提供一些帮助吗？

页面代码

首先抱歉我的英语不好。我的主页是一张图片。我在这个页面上有一些品牌。例如：

a b c 我想当我单击图像时转到第 1 页，当我单击 b 图像时转到第 2 页。我需要这样的图像映射和链接。您可以发送这样的示例或提供一些帮助吗？不是可点击的

示例 html

对不起，如果我的英语不好。我有一个项目使用 angular 来读取 pdf 文件并将它们显示为翻书。我正在使用带有 turnjs 库的 ngx-extended-pdf-viewer。但是，他们很难一起工作。请帮我改进一下。我以如下角度阅读了pdf文件：

组件.html

组件.ts

我能够阅读 pdf 文件，我也可以在 angular 上使用 turnjs 来创建翻书，但是同时使用两者时它不起作用。