I was asked by a client to create a bookflip (Page Turn) effect that did not require Flash. I found a Javascript class and decided to use it as the basis for a JQuery plugin. The imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Adding audio is easy because Sound Manager can be used with the plugin.
Default Setup
The default mode for the imBookFlip plugin is inside a container that is positioned using relative positioning (position: relative).
First we load the necessary files:
<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery/imBookFlip/jquery.imBookFlip-0.5.js"></script> |
Next we create a style for the book and a style for the book’s pages. The pages can be any dimension.
#myBook { display:none; position:relative; width: 604px; height:362px; float:left; } .imBookPage { position:absolute; left:0px; top:0px; width: 300px; height:360px; color:#fff; overflow:hidden; border: solid 1px #000; } |
Now you create your pages (inside the book container). Make sure you give your book’s container an id. The first page is the book cover (displays on right side of book). You can also have a back cover (displays on left).
<div id="myBook" style="display:none;"> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page1.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page2.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page3.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page4.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page5.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page6.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page7.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page8.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/joneil.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/scarter.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/djackson.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/tealc.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/cmitchell.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/vala.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div> </div> |
Each div is a page and is assigned the page class (imBookPage). This class will be needed when using the imBookFlip plugin.
$(document).ready( function() { $("#myBook").imBookFlip({ page_class: 'imBookPage' }); }); |
The settings above will load the book in a relative position on a page and will require user input (click) to move from page to page. The user can move forward and backwards (next and previous pages).
Iframe Option
You also have the option of loading the book in an iframe.
Parent File
The iframe will be loaded in the parent html file (php, etc). The parent file set up is similar to the default mode setup. The major difference is that the html markup for the book is not created on this page.
Iframe Styling
As with the default mode styling, you need a page style, but instead of a book style, you need a frame container styling:
.imBookPage { position:absolute; left:0px; top:0px; width: 300px; height:360px; color:#fff; overflow:hidden; border: solid 1px #000; } #iframeCntnr { width:604px; height:362px; padding:0; float:left; } |
To use the iframe option, you need the following:
src: The iframe source file.
book: The id of the book container in the iframe source file.
$(document).ready( function() { $("#iframeCntnr").imBookFlip({ page_class: 'imBookPage', iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'} }); }); |
Iframe Source File
The iframe source file (iframe.src) also contains the imBookPage style.
.imBookPage { position:absolute; left:0px; top:0px; width: 300px; height:360px; color:#fff; overflow:hidden; border: solid 1px #000; } |
The book’s pages are also contained in the iframe source file.
Note: JQuery and other script files (like this plugin) do not need be loaded into the iframe source file.
<div id="myBook" style="display:none;"> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page1.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page2.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page3.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page4.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page5.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page6.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page7.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page8.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/joneil.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/scarter.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/djackson.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/tealc.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/cmitchell.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/vala.jpg")></div> <div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div> </div> |
Ajax Option
As of version 1.3, you now have the ability to load the pages ajaxally. Just create a file for each page and then load then load a JSON object with the page information.
$(document).ready( function() { $("#imBookCntnr").imBookFlip({ page_class: 'imBookPage', pages: {src: 'assets/imbookflip/book.php', base_url: '/assets/imbookflip/pages/'} }); }); |
The pages.src option is the source JSON file. If all of your files are in the same location, use the pages.base_url option so that you don’t have to enter the same path for your files.
The JSON object:
[{"page_url": "front_cover.php"},{"page_url": "page1.php"},{"page_url": "page2.php"}, {"page_url": "page3.php"},{"page_url": "page4.php"}, {"page_url": "page5.php"},{"page_url": "page6.php"}, {"page_url": "back_cover.php"}] |
The CSS:
.imBookPage { position:absolute; left:0px; top:0px; width: 300px; height:360px; color:#fff; overflow:hidden; border: solid 1px #000; } #imBookCntnr { position: relative; width:604px; height:362px; padding:0; float:left; } .myPage { width: 300px; height:360px; } |
Iframe Option
By loading the pages using ajax, you also have the option of loading a page in an iframe. Just set the load_in_iframe option to true in the JSON file.
[{"page_url": "front_cover.php"},{"page_url": "http://grasshopperpebbles.com/", "load_in_iframe": true},{"page_url": "page_team1.php"}, {"page_url": "http://www.imdb.com/character/ch0005968/", "load_in_iframe": true},{"page_url": "page_team2.php"}, {"page_url": "http://brainstorm.grasshopperpebbles.com/", "load_in_iframe": true},{"page_url": "page_team3.php"}, {"page_url": "back_cover.php"}] |
Note: When using the iframe option, you should opt for external control of the page flip rather than clicking on the page itself. Because of the same-domain policy, the on-click event does not work for an iframe whose source is not the same domain.
before_show, on_show
In addition, when using ajax, you can set before_show and on_show events for each page. The value for each should be a Javascript function. Your before_show function should return a value. Use these options if you want something to occur prior to displaying a page (before_show) and after a page is displayed (on_show). The plugin will automatically send the id of the page that is calling the function.
[{"page_url": "front_cover.php"},{"page_url": "http://grasshopperpebbles.com/", "load_in_iframe": true},{"page_url": "page_team1.php", "before_show": "doBefore"}, {"page_url": "http://www.imdb.com/character/ch0005968/", "load_in_iframe": true},{"page_url": "page_team2.php", "on_show": "doOnShow"}, {"page_url": "http://brainstorm.grasshopperpebbles.com/", "load_in_iframe": true},{"page_url": "page_team3.php"}, {"page_url": "back_cover.php"}] |
function doBefore(el) { alert('before show. page container: '+el); return true; } function doOnShow(el) { alert('on show. page container: '+el); } |
AutoFlip and AutoFlipSpeed
The plugin has three play modes:
autoFlip: off – The default mode. In this mode pages will turn when manually clicked.
autoFlip: auto – Page flip will occur automatically at specified intervals beginning after the html document has loaded.
autoFlip: click – Page flip will begin after user clicks on the first page (the cover page).
The interval in which the pages turn can be set using the AutoFlipSpeed option. The default speed is 7000.
$(document).ready( function() { $("#iframeCntnr").imBookFlip({ page_class: 'imBookPage', autoFlip: 'click', autoFlipSpeed: 5000, iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'} }); }); |
Sound Manager
You can add sound to your book using the Sound Manager (download here).
First you need to add it to your page (the parent file, not the iframe source file). Add it before the imBookFlip plugin is added:
<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/soundmanager/soundmanager2-nodebug-jsmin.js"></script> <script type="text/javascript" src="js/jquery/imBookFlip/jquery.imBookFlip-0.5.js"></script> |
Sound Options
The sound_manager options:
swf_loc: This is location of the soundmanager2.swf file that is needed by Sound Manager.
audio_loc: The location of the audio file that you want to load/play.
debug: Use this if you want debug messages to display screen. Use this in development only. The default is false. I used it when I was trying to figure out why the audio file was not loading. For more information about debug, see Sound Manager Documentation.
$(document).ready( function() { $("#iframeCntnr").imBookFlip({ page_class: 'imBookPage', autoFlip: 'click', autoFlipSpeed: 5000, sound_manager: {swf_loc: 'assets/js/soundmanager/soundmanager2.swf', audio_loc: 'assets/js/jquery/imbookflip/StarGate-SG1.mp3'}, iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'} }); }); |
Update: Version 1.0. 12-28-2011
Over the last couple of years, I have had a few requests for updates to the plugin, but I just found the time to make the changes. One of the requests required me to re-write the plugin using a Object Oriented approach. By making this change, the developer will now have the ability to control the page flip externally (from other elements on the page).
Using the plugin
Instantiating the plugin is similar to the previous version.
$(document).ready( function() { var myBook = $("#iframeCntnr").imBookFlip({ page_class: 'imBookPage', autoFlip: 'click', autoFlipSpeed: 5000, sound_manager: {swf_loc: 'assets/js/soundmanager/soundmanager2.swf', audio_loc: 'assets/js/jquery/imbookflip/StarGate-SG1.mp3'}, iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'} }); myBook.create(); }); |
First we assign a variable to the plugin and then we call the create method.
Public Methods
In addition to the create method, the plugin has a few other public methods:
flipPage – This method allows the developer to control the page turning via an external element like a button or link. The method takes a single argument – the flip direction (‘next’ or ‘previous’).
$(document).ready( function() { var myBook = $("#iframeCntnr").imBookFlip({ page_class: 'imBookPage', iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'} }); myBook.create(); $('#nextButton').click(function() { myBook.flipPage('next'); }); $('#prevButton').click(function() { myBook.flipPage('previous'); }); }); |
goToPage – As the name suggests, use this method to go to a specific page. You can use the goToPageSpeed option to control the speed (in milliseconds) at which the book will turn a specific page. The default value is 500.
$(document).ready( function() { var myBook = $("#iframeCntnr").imBookFlip({ page_class: 'imBookPage', goToPageSpeed: 300, iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'} }); myBook.create(); $('#pageControl').change(function() { if ($(this).selectedIndex != 0) { myBook.goToPage($(this).attr('value')); } }); }); |
Flip Direction
One of my readers pointed that some cultures read books from right to left, so I created the flipDirection option. The default value for this option is ‘ltr’. To have the book flip right-to-left, change this value to ‘rtl’.
$(document).ready( function() { var myBook = $("#iframeCntnr").imBookFlip({ page_class: 'imBookPage', autoFlip: 'click', autoFlipSpeed: 5000, sound_manager: {swf_loc: 'assets/js/soundmanager/soundmanager2.swf', audio_loc: 'assets/js/jquery/imbookflip/StarGate-SG1.mp3'}, iframe: {src: 'assets/iframesrc/book_rtl.php', book: 'myBook'}, flipDirection: 'rtl' }); myBook.create(); }); |
Demos
To view demos of the imBookFlip plugin, go to: http://grasshopperpebbles.com/demos/.
The new version is stored on GitHub.
The previous version of the plugin can be downloaded from Google Code or JQuery Plugins.
Enjoy.
Can this script be adapted to a .pdf to cause the page flip affect?
.-= Sage´s last blog ..Traditional? Self-Publishing? Vanity Press? =-.
I don’t think a PDF has this capability. Perhaps if you have access to the original material. I can look into it. Perhaps a flash-based page turn would better suit your needs.
Yes, I have the base file in InDesign. The flash-based page flip documents don’t have as much to offer the reader in terms of zoom and the .pdfs are being ported to eBook readers. I would love to see if this could be adapted to the .pdf as a javascript enhancement (which is permitted in .pdfs). Thanks so much!!
.-= Sage´s last blog ..Traditional? Self-Publishing? Vanity Press? =-.
Hi there. Love your pageflip plugin, it’s just what I’m looking for! Do you have a PayPal donation page or similar so that I can give something back?
cheers
Hi, it is great script. I was actually going to a Flash script for this result but because I always prefer not use flash I am thinking to use this one instead. However as I am seeing it I can’t find a way to click on a “page”. Like if I don’t want to turn the page on click but want to zoom it, or to send it to another url.
Do you have a way to do it? Let me know if there is.
Thanks again
You can add anything inside each div, to include links to other web pages.
Hmm, it is more than a good news, thanks I will try it. I guess I will have to change my entire layout now. Added work for no extra money! Lol. I am just kidding it is personal project.
Thanks again for support.
Really need to test this in IE. Doesn’t seem to work in IE8…
Would also be cool if the next page preloaded the facing page first (the right page, when reading book normally, displays the background image only after the page turn has finished in Firefox 3.5)
But, having said that, good work! If I do any tweaking I will send it your way.
Actually, the problem was the demo page. A string concatenation mistake for the image url caused the pages not to display in ie8. I’ll look into the preloading of the image, but I assume that if the background image was added to the css file rather than the style attribute of the div, then the image will automatically be preloaded.
I am wondering if I can do this by linking to an image instead. Any suggestions on how I might do that?
I’m not sure what you mean by linking to an image. Does the image exist under a different domain?
well I am trying to use this plug-in to display images from my own site that are in my images folder. They have not yet been posted to my site.
So the images are sitting on your computer, but you want to view them online? If that is the case, I’m not aware of any program that will allow you to view images online that are sitting on your computer.
thanks anyway…that’s not quite what I was saying, but that’s ok.
Hi Grasshopper P, any joy on the IE8 issue yet? I have prob. in that in IE8 the script always shows the last page and will not go back & forth – strangly your demo pages does work, is the down load script V.06 the most current – downloaded from Google today?
Help appreciated
I’ve tested on IE8. I haven’t had a problem. What version of JQuery are you using? Send me your json object.
HEY I SAW YOU MANAGED TO GET THE DEMO PAGE BACK UP.
sry caps…
Your links to the demos are all screwed up do you have a link to your pageflip demos?
thx.
The demos are back online (with the correct links). Thanks.
There is a small error in your HTML code for the individual pages which is probably why Russell was having problems.
The closing quote for the style attribute of the individual pages needs to come after the closing brackt
Thanks for the plugin all the same
I would like to put up instructional booklets. I want to record audio to match outlines on each page. The audio should match the topics shown on each page. Can this be done?
.-= Tom´s last blog ..EB Classifications – Visa Bulletin =-.
No, the plugin does not currently have this option, but it is a very good idea. I’ll try to add it by the end of the week. Any other suggestions?
Great. btw, can this be incorporated into a WebPress page? I have a developer who is doing this for me. Let me know what needs to be done to added to my site (www.LiveImmigration.com) Thanks.
How about the following (things I’d like to have):
1. On the flipbook applications I’ve looked at, I hate zooming in – too much trouble. I want the ‘book’ to be large enough to read.
2. The page linked to the sound (scenario: I am giving a lecture using the onscreen outline) is brightened – i.e., highlighted – or better yet -> maybe even enlarged slightly – so the Reader can easily follow visually what is being discussed. If enlarged, the other page could be slightly reduced.
3. The background of the pages should look like a book page.
4. I like the binder shown in the Shrek booklet.
.-= Tom´s last blog ..EB Classifications – Visa Bulletin =-.
hey how can i add thumgnails to the page turn…thumbnails like small pictures the books pages that when clicked takes you to the desired page
Interesting. I’m working on a new version. I’ll add the functionality to the next release. I’ve been very busy, so I’m not sure when the new version will be available. Perhaps before the end of the month.
How about adding |previous| and |next| buttons/links to turn the pages as well…or even make a configurable var option to let the designer decide: var PageTurnOptions = (pageclick)(buttons)(both)
If I had any smarts I could probably figure out how to adjust what you have provided…but I is dumb.
Hey, thanks for all you have done!! It is really great and much appreciated.
Sorry for my english …
So, thank you for this script.
I just have a little problem with image’s width.
I would like using % instead of px but I don’know how to do with background methods …
Can you give me more detail? What is your current styling?
Every id and class are in %, so I would like adapt image size with screen resolution.
But now is ok with an other solution …
Thanks for your reactivity.
it doesn’t work at my end, nothing displays :/
it doesn’t work at my end, nothing displays
Nice Plug-In
In order for me to help you, I need more information.
In order for me to help, I need more information.
Hi thanks for the good code,in hte sample u explained there is no help how to use the iframe in the sample.but i took the source code of the demo and see where u used.How can use the same in iphone if i added the same in the iphone browser the image will be not fit to the screen if i adjust to fit the screen the image width is the main param of div so how can i adjust to use the same in iphone
please help me in detailed way
Hi, this is a great little trick!! i am all new to web designing and CSS. I really want to use this for a project i’m working on but cant seem to figure out if it would be possible to duplicate this multiple times on the same page?? its for an online advent calender with 12 doors..
Any help will be much appreciated…
Thanks
Nice job. I notice that if you click to move to the next page in rapid succession it seems to exhibit some strange behavior with the z-index and which page is displayed. I ran into this attempting to add a feature to jump to the last page or a page more than 1 set higher than the current set. I would definitely be interested in any thoughts you may have on how to implement this.
Thanks
Hello,
First of all: I don’t know your name, how can I say thank you this way? It is not the proper way… In the about box you don’t mention it…
Now let’s get down to business. I don’t like Flash, I like .NET but I don’t want to use Silverlight just to turn a book
So, your jQuery plugin was the perfect answer.
I was only annoyed because the flipping effect didn’t remove the previous page before completing the flip, and it made the ingenious animation lose some of its grace… I really thought it should be easy to solve, but then if it was easy, you would have solved it already! But, anyway, I took a look at the code, nice, clean and short, which is always good. And tried some things…
First I just changed the nextPage() to execute $(lpage).css({‘width’: ’0px’}); before doing the animation. It made things worse as the page appeared first. Then I had the “brilliant” idea of animating the lpage together with the (next) page, like this:
$(lpage).animate({‘width’: 0+’px’}, ‘slow’);
$(page).animate({‘left’: 2+’px’, ‘width’: pageW+’px’}, ‘slow’, function() {
$(lpage).css({‘width’: ’0px’});
…
And it really worked smoothly… The effect is MUCH nicer now IMHO. I think we can make it better still by animating the lpage to 0 width and then starting animating the (next) page from he middle to the end of the final position, but, seriously, I think it is so nice right now that I don’t know if it is worth the extra effort…
You can find the modified script in my wife’s site (she is a librarian, so your script was PERFECT):
http://lucianasciammarella.com.br
The direct download link is:
http://lucianasciammarella.com.br/jquery.imBookFlip-0.6A.js
I’ve appended an “A” to the version number…
I can’t say enough thank you to you for this amazing little script, my wife is so happy with the looks of her site prototype!!!
In time, I.E. causes some problems to the script… It took me a couple of hours to understand why it didn’t work in IE8, while it worked in Opera, Safari (including the iPhone 4 brower), Firefox and Chrome. In the end it was simply this:
.imBookPage {
position:absolute;
left:0px;
top:0px;
width: 407px;
height:651px;
overflow:hidden;
>>>>> border:solid 1px transparent;
}
If you remove the border, IE throws an error in jQuery (I believe it may be a division by zero somewhere). So, anyone having IE8 problems, should check if the border is set in the book pages CSS…
Hi,
Did you get my updated script? You’ve deleted my comments, was it intentional? Did you feel I was trying to take credit from you? It was very strange to give back some feedback only to have my comments deleted. Anyway, there is a Stack Exchange post where I suggested using your jQuery plugin and also provided a link to the updated script (only two lines of code after all)… You can delete this comment here, it was only meant as a kind of “private” message anyway.
Is it possible to rework this plugin to use p’s instead of div’s for elements? I’m trying to incorporate this into a site that has conflicting jquery which affects all surrounding divs, and unfortunately the imBookFlip is being broken as a result.
I’m imagining it would entail reworking the jquery.imBookFlip-0.5.js to handle p’s instead of div’s but I’ve been unable to make it function properly.
Would you happen to have any thoughts or insight into this? Thank you!
Wouldn’t it be more logical to change the right page before you see the turn effect… I’m just saying!
I am wondering!!!!!!! can i have the same plug in for Contents in place of Images here. I am looking for a real book with content pages. can i use it? or alter the code to achieve the same?
Hey great stuff, am working on getting a flip book idea for the ipad (to avoid flash)… I cannot see anything except first page on ipad or in safari….but firefox works fine? thanks!
Hey there. Great script! Ideal for my project. But – it’s necessary for me to resize the images. I don’t know of a way to do this in CSS, so instead of having each page as a background image, I’ve put them as images inside each page div. Resizing issue sorted, but that’s screwed up the lefthand pages as you flip – it seems to be piling the flipped pages underneath the first page rather than on top; this also means you can’t flip backwards through the previous pages. Any suggestions/solutions gratefully received! Thanks.
I have been extremely busy, so I haven’t been able to keep up with my site. I will look into your changes. I think that I may finally have time to incorporate the many suggestions that I have received. Thanks.
Sorry for the late reply. I’ve been extremely busy and I haven’t worked on the site in about 4 months. I will look into your changes.
Les, how would I go about changing to a specific page on a click. I have a Table of Contents on the first page that I’d like to have some links that visitors can click on to jump to the different pages/chapters.
I’ve tried looking at the DOM to make sure I am getting the right object, but now I am getting errors about “sound_manager is null or not an object”.
Thanks in advance.
Hi
I am looking to add proper page flip and make it a cms site. The page flip should be like you can drag a page and flip it rather then a click and flip do you think its possible . I am not a developer but if its possible some instruction would be good so i can ask my developers to have a go
regards
jamal
Is this using CSS transitions? How’s the cross browser compatibility on this script? Sorry for all the questions – but this is great – thanks for sharing.
Hello really impressive little plugin…I was wondering if there was a place to actually download the source code with the sample pictures as well? I am new to this stuff and it would help out a lot having a working example to go over….
Hello
I want the book to start from right to left as you read arabic books.
Kindly help me in this.
regards,
tanura
Do you’ve more updated script…. coz I need for my website sometime this script generating errors.. I don’t know whether is my xhtml problem or hosting problem or unable to redefined your script….. Please send me your suggestion…
Regards,
Thanks for the plugin it’s awesome, I had an order to make imageflip easy to use in Drupal 6, so I’ve managed to adapt imBookFlip to work with Views 2, Anywho.. i have it working in my dev-enviroment and have created a sandbox project in drupal so others can use it too. Al though i don’t have a Git link yet.. i need to make some template-dependencys go away.. the module is called Views imBookFlip and you can see the info here: http://drupal.org/sandbox/kentoro/1329014
Perfect!…it’s just i was looking for…i hope it will be developed even more.
[...] http://grasshopperpebbles.com/ajax/jquery-plugin-imbookflip-page-turning-without-flash/ [...]
I am an Indian .
Am a Media Researcher.
I am in need of immediate help from you!!!
Please mail me at my mail id or comment in this website….
I need a flip book software like 3D-book Without flash or with flash .. But the Zoom in Zoom out and the save as PDF, mailing options must be there……
Can anyone help me?????.
Admin, please reply me regarding this query….
Kentoro,
Sounds like an interesting project. Let me know if you need any help. I haven’t been keeping up with Grasshopperpebbles lately (I have been extremely busy for over a year). I happen to come on the site this morning because I just created a new version of imBookFlip and I wanted to see if there were any suggestions that should be incorporated into the new version. One of the major changes I made to the plugin is to allow for external control (i.e., you will be able to click on a button or link to control the starting and stopping of the page flip).
I re-created the plugin using OO, so calling the imBookFlip plugin will a bit different.
I am currently testing and I plan to release it in the next couple of days.
Les.
Tanura,
Sorry for the late response. I haven’t been on my site in a while. I am currently upgrading the plugin and I will look into adding this functionality.
Les
I just completed the changes to the plugin and updated the post. Let me know if you have any questions.
Les, I sent my module to the application queue to be aproved, i have to wait untill they check it out. I did add more stuffs besides the posibility of having autoflip and speed by the module settings i added the posibility to specify the width and height of the page, so i use it from the call.js instead of the css, well the css gets overriden by the .js and that is the point of it. I am thinking in how about klicking outside the book to close it or a close button and an overlay over the page, or how to put it in a block and not being at the top of the page as it is now. thoughts?
Thats a nice script! I seek for quite a time to realize a new project…That’s exactly what we need to forget the flash-versions.
Hi
The plugin is great.
I am having trouble though in IE 8.
I was using v0.6 but upgraded to v1.0 and this fixed some of the trouble but the page turn effect is not appearing for me in IE8.
Works great in IE9, FF and Chrome.
See here for example http://www.infinetsolutions.net.au/vomo
CSS:
.imBook {
display:none;
position:absolute;
left: 0px;
top:20px;
width: 834px;
height:595px;
}
.imBookPage {
position:absolute;
left:0px;
top:0px;
width: 417px;
height:595px;
color:#000;
overflow:hidden;
border:solid 1px transparent;
}
Note: I am centering the imBook div using javascript and calculating page width
Thanks
It appears as though it slows down in ie8 the more pages you add.
So up to about 14 pages is fine but then slows down too much.
In any other browser it works fine… any ideas how to get around this?
I am loving this page flip, but I have a query or two. In IE8, scroll bars appear around the flip book (see your demos), whereas they do not in Firefox. Any ideas how to stop them in IE8?
Also, in IE8, the area where the book ‘cover’ opens onto is grey in IE8 (same goes for the back cover) whereas I can ‘colour’ it in FF. Help please?
Hi, thanks so much for the super cool plugin. I’m trying to make just a very simple version of it (just trying to get it to work at this point) and I can’t seem to get it to work. The book just comes up blank with no images, and I can’t figure out why
The weirdest part is that there are no JavaScript errors… Mind taking a look?
http://heathercash.com/testing/book.html
I’m new at jQuery, so sorry if it’s some simple jQuery thing I don’t know about
Thanks so much!
Heather
Would you create a Joomla! extension of this page flip program.
If you do then it would be great if you could create it as a component the same way yootheme.com creates their widget program for Joomla 2.5
if you need to see how it works then I could loan you the files
I see the images and the bookflip is working.
Really? I don’t see any images. I am just embedding your images, could that be why? Do you have any kind of restrictions set on them?
If you send me the files, I’ll look into it.
Thanks.
Would you please send me an email and also the website or websites that you want to work on this so that I comply with my licence and I will forward them to you.
I could not find your email
Kind Regards
Keren
Hi,
Thanks so much, which email address should I use?
I tried sending to lesgreen@grasshopperpebbles.com
Should I send it to a different email address?
Thanks!
Hello, any way to keep type sharp when viewing zoomed in? I have a pdf catalog and can save the pages in PhotoShop. Hi-res jpgs don’t work. Can I save them with more pixels and have flipbook see the file as a thumbnail before zooming in? Thank you.
[...] 10. imBookFlip [...]
Christine,
Sorry for the late reply. I haven’t kept up with my blog lately. You may already have a solution. Are you saying that you want to display thumbnail images and when the user clicks on the thumbnail, a larger image displays?
Richard,
I updated the imBookFlip plugin (version 1.2). The scroll bars are now removed and you should have a problem with color.
Thanks for the great plug in, it’s exactly what I was looking for.
Although I am having one problem, the images aren’t loading in google chrome or google based mobile browsers. All other browsers it is working flawlessly. Has anyone ever had this same problem??
[...] effect plugin for jQuery which allows you to flip whatever html element you want.imBookFlip – MORE INFOThe imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can [...]