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