The content flip plugin BookBlock has been updated and improved. Content can be flipped vertically and horizontally, and we've added support for RTL among other things.
From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
We’ve updated BookBlock, the content flip plugin. It has undergone some major changes with some improvements and we’ve added some new functionality. Take a look at the original article to see how to use it and what options are available.
Demos
We’ve updated the demos and added some different examples:
- Demo 1: Default configuration with navigation examples
- Demo 2: Horizontal flipping
- Demo 3: RTL Support (right-to-left support)
- Demo 4: Fullscreen example
- Demo 5: Multiple instances with dots navigation
Summary of Changes
- Removal of unnecessary and outdated prefixes in the CSS
- Many styles that were added with JS before are now in the stylesheet. This allows for a better control.
- We’ve added support for horizontal flipping (see demo 2)
- We’ve added support for RTL (see demo 3)
- We’ve added methods for going to the first and last page
- There is a Vanilla JS version of the plugin
Awesome :D! Actually I was looking for somthing like this some month ago, love it! thanks!
Fabulous, as always. Thank you!
Would it be possible to explain which prefixes are no longer necessary?
Wow! nice features! especially the calendar.
Is there a way to remove the flicker effect on the iphone? Besides that seems to work great.
thank you very much for always supporting the design and creativity. The tutorials are really useful and instructive.
Awesome love it 😀 thanks for sharing
Very coool.!!!!!
Nice share the calender is awesome 🙂 🙂
Nice I like it
Really nice job, but not working in Opera (tested in the version 12.15)
where do it put the onEndFlip : function( page, isLimit ) { return false; } ? tried it everywhere I can think of – we could use a demo of it looping maybe?
Thanks for the great work
onEndFlip: function(old, page, isLimit) { return false; ) it’s work correctly
I have used your previous book block plugin in my website: http://www.whalaashrinathji.com/darshans.html but i am not able to view the effect online. On my system its working fine but when I upload its not showing plugin effect. Could you please visit the page and help on it.
AWESOME!
its awesome, how to change a horizontal transition from top to bottom as default?
Hey
This is a great plug-in and I absolutely love it.
I have been experimenting a lot with it and I found one issue that I can’t fix!
I have been using demo 4 and when I put photos onto pages, it works great. Plus, when you re-size the browser window the photo decreases (or increases) in size along with it – all good so far.
Is there a way to keep the entire book, aspect fixed? The same as though you were re-sizing a PDF, for example?
So that when a user re-sizes a browser to an extreme the photo doesn’t become distorted and will always show at the same aspect ratio as it was meant to be.
I showed this plug-in to a photographer and he loved it but didn’t want to use it because if this. I can sort of understand his point – anyone have an idea on how to fix this??
Many thanks
Rob
can any one help me………..
how to use this in asp.net..
pls………………..
Wonderful, I was studying this solution when I saw the update.
May I ask a question:
How can I hide/show the toolbar (or navbar) on full screen example?
I’m preparing my site, and I’m seeking a pretty solution for comic reading online.
Of course, later I’ll had to find a solution for format, but one thing at a time.
Anyway, many thanks for your amazing shared work. Muchas gracias.
these articles and demos are always so great and always an inspiring way to start my day. thanks for the continuous effort! 🙂
This is very awesome. Is there a way to have a dynamic height per slide? Or does a set height have to set via CSS? I’m wondering if we can use JS to specify the height per slide.