Flipbook in html

Hy everyone,

I would like to integrate a flipbook on one of my sites.
I found the project below: http://www.turnjs.com/#uncategorized 5

But it’s impossible to run it with my meager knowledge in the code!!!

If a charitable soul could help me, that would be great!

This requires a bit more than just the Flipbook download, the jQuery framework. I remember setting this up via a CMS and FTP alongside a programmer but maybe it is more refined nowadays. Sorry, I’ll leave it at that.

1 Like

Generally what you do is publish something like that in its own folder on your web host, using an FTP app or the web host file manager, then integrate it in Sparkle via an iframe.

Code like this (replacing your address in the src=) would bring it in Sparkle, fully resizable.

<iframe frameborder="0" src="https://sparkleapp.com" width="100%" height="100%"></iframe>

3 Likes

I’m going to test all this tonight!!!

Thanks to both of you for your help (Duncan, I spend my time thanking you… thank you again for your time and patience :wink:

Nicolas

I understand the iframe code. But, where would I put that code in Sparkle? Just drop a embed component anywhere on the page?

Yes. Since the flipbook is a visual element you will place the embed element where you need it. If it were some complex thing that say the tawk.to chatbot we recently added to the sparkleapp.com home page, then it’s generally best to add the embed near the bottom of the page. It will work anywhere, but allow the page to load faster if at the bottom of the page.

1 Like

Hi, I use the iframe but I have difficult to seti in tablet visualization. On PC optimization is ok, when I switch to tablet workspace I can’t adapt the iframe to the resolution and the result is cutted flip book on sides.

Suggestions?

Thanks

Probably something about the code of the page inside the iframe. Hard to say without seeing it.

Sorry Duncan to revive this topic, but I like it very much :wink: but can’t get through…
I made a “flipbook.html file and with filezilla, created a folder in the download folder of the site.
then I copied the adress* and pasted it in src=” " but nothing loads and I’m staring at a lonely blank frame.

*"ftp://karyatides@ftp2.aquaray.com/www/download/katalogEN/KATALOG.html

where am I wrong ?

You need to use the corresponding web address, not the FTP address.

Duncan

Many Thanks, I did get something, but not in the right way

to get a flipbook, Indesign produces an html and a swf file. If I link to the first, nothing happens. To the second, I get a chrome warning (“achtung ! flash will ruin your computer”) on safari no warning and the flipbook appears but way out of the frame and quite small ( so I put width/eight but it goes further out of frame…)

Any idea Maestro ?

Flash is dead, that won’t work. You need something in HTML and JavaScript.

Amen…
it explains a lot. thanks

Hi all, very interesting feature - I would like to know if the code of Turn.js is possible to integrate in Sitely the same way?

I don’t see why not @arteventura.

Create a test project, use an Embed Widget and when clicked on place the code in the right hand panel and save. You will then need to Publish onto a server, preferable in a test folder, and view it in the browser…

My experience with page flip publications is that they are best created outside of Sitely altogether. Essentially they are self contained web applications that have their own index.htm page and are published directly to your server in a dedicated folder. You can see one at this link: https://dbhosting.online.candela . If you reference this url in a code snippet in Sitely, the publication will display in your Sitely page. I think this was the solution @duncan suggested in an earlier post, and it works perfectly well.

You could also consider an alternative solution that is fully supported natively in Sitely. Create your publication as a PDF and add the file to an image gallery. You can have this display at say thumbnail size on your page, and have it open in a light box when clicked. When it’s enlarged on screen you will be able to flip through the pages. The only thing you won’t have is the page turning effect. However, in the modern world of tap and swipe, this added feature doesn’t really add much to the visitor experience.