bernhard Posted July 11, 2022 Share Posted July 11, 2022 I want to show some PDF files on one of my sites. I konw https://www.yumpu.com/de/publishing-software/free and it's nice, but I'd prefer a self-hosted solution where my client just uploads the PDF and my website embeds it as a flipbook automatically. Do you know any good and free libraries or know how one could build such a tool (maybe 3d.js??)? Thx Link to comment Share on other sites More sharing options...
diogo Posted July 11, 2022 Share Posted July 11, 2022 That's a tricky one. At least I didn't find anything like this some months ago. What about using something like Turnjs , which is for html5 content, not pdf, but use imagemagick to convert the PDFs to PNGs? 2 Link to comment Share on other sites More sharing options...
bernhard Posted July 11, 2022 Author Share Posted July 11, 2022 10 minutes ago, diogo said: That's a tricky one. At least I didn't find anything like this some months ago. I was afraid to hear that. Same here ? 10 minutes ago, diogo said: What about using something like Turnjs , which is for html5 content, not pdf, but use imagemagick to convert the PDFs to PNGs? I've also found that on my research, but I don't really like that solution. First it needs jQuery which I don't really want to have on my frontend. Second if I add the PDF as jpg images I guess I will run into troubles regarding readability. It seems it does not provide a zoom feature? Also if I do use a JPG/PNG approach I'd just use a uikit lightbox and need no external dependencies. Maybe the easiest solution would be to just implement a zoom feature for uikit lightbox?? I have an idea... ? Link to comment Share on other sites More sharing options...
diogo Posted July 11, 2022 Share Posted July 11, 2022 If you don't need specifically an imitation of a magazine, there might be other solutions. That one might be a good idea ? Did you see pdf.js from Mozilla? 1 Link to comment Share on other sites More sharing options...
bernhard Posted July 11, 2022 Author Share Posted July 11, 2022 Yeah pdf.js was one of the suggestions for my client. I've done that here: https://www.autohaus-bendel.at/fahrzeuge/408486-suzuki-vitara-1-4-gl-ditc-hybrid-allgrip-flash/ It's nice, but something where you can flip through the pages is definitely nicer. Not sure... PDF is indexable by google I think. JPG/PNG would not be. Also PDF can be downloaded at once. Maybe I'd need both solutions then, a PDF do download (and for google) and a nice flip implementation to quickly open and browse the magazine (without downloading megabites of data just to view one page)... Link to comment Share on other sites More sharing options...
bernhard Posted July 11, 2022 Author Share Posted July 11, 2022 Maybe I could just split the PDF into single pages and use pdf.js in combination with uikit lightbox... that way I could have a zoom feature plus all pdf features (like copying text and google indexing). Sounds nice, what do you think? Link to comment Share on other sites More sharing options...
zoeck Posted July 11, 2022 Share Posted July 11, 2022 On one Website, i use "wowBook", but it's not free and unfortunately also requires jQuery... Have also been looking for a better solution for a long time. 1 Link to comment Share on other sites More sharing options...
bernhard Posted July 11, 2022 Author Share Posted July 11, 2022 7 minutes ago, zoeck said: On one Website, i use "wowBook", but is not free and unfortunately also requires jQuery... Have also been looking for a better solution for a long time. Thx, wowBook looks nice. Not perfect, but maybe a good option for this project. What would make a solution "better" in your opinion? Link to comment Share on other sites More sharing options...
diogo Posted July 11, 2022 Share Posted July 11, 2022 Hm, for indexing, I would assume that's worse, since google would see it as a bunch of different documents. Also, I'm not sure about how efficient it would be to have pdf.js running individually for each page. I think you should separate indexing and viewing in two issues: show the pdf in a viewer, and link to it directly for indexing. I only checked pdf.js superficially, but I have the feeling that you could use it's api and css to control it as you wish. See this example from their page: https://jsfiddle.net/pdfjs/wagvs9Lf/, For what I've seen, you can also control zoom, and so on... Have a look at this video on how to build a PDF viewer with it. Maybe this is overkill for your project, but it's interesting for sure ? 1 Link to comment Share on other sites More sharing options...
bernhard Posted July 11, 2022 Author Share Posted July 11, 2022 35 minutes ago, diogo said: Maybe this is overkill for your project, but it's interesting for sure ? absolutely! maybe a PDF to download and then a quick and easy JPG-based book using uikit lightbox or https://github.com/codrops/BookBlock combined with https://www.cssscript.com/drag-move-mouse-wheel-zoom/ for zooming in... JPG would have the drawback (or benefit) that text could not be copied and links could not be clicked... Link to comment Share on other sites More sharing options...
zoeck Posted July 11, 2022 Share Posted July 11, 2022 5 hours ago, bernhard said: What would make a solution "better" in your opinion? No jQuery ? 1 1 Link to comment Share on other sites More sharing options...
nurkka Posted 16 hours ago Share Posted 16 hours ago @bernhard Which library or service did you choose in the end? Link to comment Share on other sites More sharing options...
bernhard Posted 15 hours ago Author Share Posted 15 hours ago Nothing yet. We are still not at the stage where we really need that feature 🙂 1 Link to comment Share on other sites More sharing options...
Recommended Posts