-
|
Hi :-) I have to start by saying that a simple basic example outside of <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dFlip Test</title>
<!-- Flipbook StyleSheets -->
<link href="https://dflip.test/css/dflip.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="_df_book" id="flipbok_example" source="filename.pdf"></div>
<!-- Scripts -->
<script src="https://dflip.test/js/libs/jquery-3.7.1.js" type="text/javascript"></script>
<script src="https://dflip.test/js/dflip.min.js" type="text/javascript"></script>
</body>
</html>That gives me this nice view:
This describes what I want: The PDF viewer should be displayed. What works fine outside What I have doneIn in All required resources are in place in the Then I have a page with a shortcode that inserts the display component: <div class="_df_book" id="flipbok_example" source="Test.pdf"></div>The created output ist - stripped down to the relevant parts for a better overview: <!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://localhost:1313/dflip/css/dflip.min.css" media="screen">
</head>
<body>
<div class="_df_book" id="flipbok_example" source="Test.pdf"></div>
<script src="/js/jquery-3.7.1.e5dd773c71859e5734abe80e7ae68787f5f5bfe909dce408ee68d5ce4135f1e4.js"
integrity="sha256-5d13PHGFnlc0q+gOeuaHh/X1v+kJ3OQI7mjVzkE18eQ="></script>
<script src="/dflip/js/dflip.fa58fbe4d511a32899090f96ce3b1234ae5aae069b288d802d9107bb3b7cd5b4.js" integrity="sha256-+lj75NURoyiZCQ+WzjsSNK5argabKI2ALZEHuzt81bQ="></script>
</body>
</html>What I get is an
Do you have any idea what could be causing this? Any advice is welcome and helpful. Best regards - Carsten |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
|
Looks like Try with the {{ partial "footer/esbuild" (dict "src" "js/jquery-3.7.1.js" "load" "defer" "transpile" false) -}}
{{ partial "footer/esbuild" (dict "src" "dflip/js/dflip.js" "load" "defer" "transpile" false) -}}See also: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the quick feedback. No,
I noticed in my minimalistic working example, that additional scripts seem to be injected: The source code looks like this: <script src="https://dflip.test/js/libs/jquery-3.7.1.js" type="text/javascript"></script>
<script src="https://dflip.test/js/dflip.js" type="text/javascript"></script>
</body>But in the browser it looks like this. Miraculously, two scripts have been added:
Could it be that in the <script async data-cfasync="false" src="https://dflip.test/is/Libs/pdf.min.js?ver=2.2.548pdfver=default>/script>
<script async data-cfasync="false" src-"https:///dflip.test/is//Ubs/three.min-js/ver=2.2.54"></script>Thanks for your patience:-D |
Beta Was this translation helpful? Give feedback.
-
|
Another thing to try: load jQuery in the head (this is also how DearFlip/WordPress does it). So, add to {{ partial "footer/esbuild" (dict "src" "js/jquery-3.7.1.js" "load" "async" "transpile" false) -}}And in {{ partial "footer/esbuild" (dict "src" "dflip/js/dflip.js" "load" "defer" "transpile" false) -}} |
Beta Was this translation helpful? Give feedback.
-
|
I think in the |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, I followed this example: https://jquery.dearflip.com/docs/file-structure-template/ and, as I said, it works without any problems outside thuliteio / hyas / Hugo universe. Following your suggestion, i also tried jQuery in the header with async and then with defer, and dearFlip in the footer. Always the same error. I have now put the test online to have a look: https://carsten-nichte.de/info/flipbook/ The scripts are all in place. I just lack the imagination and the knowledge of what is going wrong there :-) |
Beta Was this translation helpful? Give feedback.
-
|
This works (tested) Add to {{ $jquery := resources.Get "js/jquery.min.js" }}
<script src="{{ $jquery.RelPermalink }}"></script>
{{ partial "footer/esbuild" (dict "src" "js/dflip.js" "load" "async" "transpile" false) -}} |
Beta Was this translation helpful? Give feedback.
-
|
That is basically the solution. I added the following to {{/* I have to put dflip in the assets folder and load booth in this way: */ -}}
{{ $jquery := resources.Get "dflip/js/libs/jquery.min.js" }}
<script src="{{ $jquery.RelPermalink }}"></script>
{{ $dflip := resources.Get "dflip/js/dflip.min.js" }}
<script async data-cfasync="false" src="{{ $dflip.RelPermalink }}"></script>
{{/* ----------------------------------------------------------
The following two scripts are dynamically injected from dflip...
so i have to provide these via `static` folder.
<script async="" data-cfasync="false" src="http://localhost:1313/dflip/js/libs/pdf.min.js?ver=2.2.54&pdfver=default"></script>
<script async="" data-cfasync="false" src="http://localhost:1313/dflip/js/libs/three.min.js?ver=2.2.54"></script>
*/ -}}After that the whole thing works like a charm. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Great you got it working! |
Beta Was this translation helpful? Give feedback.
This works (tested)
Add to
layouts/partials/footer/script-footer-custom.html:{{ $jquery := resources.Get "js/jquery.min.js" }} <script src="{{ $jquery.RelPermalink }}"></script> {{ partial "footer/esbuild" (dict "src" "js/dflip.js" "load" "async" "transpile" false) -}}