JQuery Plugin: imBookFlip. Page Turning without Flash
Monday, October 26th, 2009I 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.
Note: Version 1.0 of the imBookFlip plugin has been released (12-28-2011). The primary change was to re-create the plugin using an Object Oriented approach. Please read the bottom of this post to view the changes.
Default Setup
The default mode for the imBookFlip plugin is inside a container with that positioned absolutely on a page (position: absolute).
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. These can any dimension, but must be positioned absolutely.
#myBook { display:none; position:absolute; left: 400px; top:270px; width: 604px; height:362px; } .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 an absolute 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).
Problem with Default Mode
The default mode is simple to setup, but requires the book container to be positioned absolutely on a page. In fact the plugin itself requires the book and it’s pages to be absolutely positioned.
So if the book is positioned absolutely, the siblings of the book will also have to be positioned absolutely (or relative).
Floats (float:left) could not be used in your web design (you can put a float inside a absolutely positioned element, but your web page will not display correctly if a floated element and an absolutely positioned elements were siblings on a page).
Iframe Option
To get around this obstacle, I added an iframe mode to the plugin that allows the book to be loaded in an iframe.
Now this may not be the best solution, but it was the only way that I could ensure that the plugin could be used with any design. I use floated elements in most of web designs – I rarely ever use absolute positioning.
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> |
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.
November 14th, 2009 at 2:10 pm
Can this script be adapted to a .pdf to cause the page flip affect?
.-= Sage´s last blog ..Traditional? Self-Publishing? Vanity Press? =-.
November 15th, 2009 at 1:05 am
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.
November 15th, 2009 at 1:15 am
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? =-.
December 12th, 2009 at 6:38 pm
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
January 2nd, 2010 at 6:34 am
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
January 2nd, 2010 at 10:30 am
You can add anything inside each div, to include links to other web pages.
January 2nd, 2010 at 10:58 am
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.
January 24th, 2010 at 2:24 pm
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.
January 24th, 2010 at 9:05 pm
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.
February 3rd, 2010 at 4:51 pm
I am wondering if I can do this by linking to an image instead. Any suggestions on how I might do that?
February 3rd, 2010 at 5:02 pm
I’m not sure what you mean by linking to an image. Does the image exist under a different domain?
February 3rd, 2010 at 5:10 pm
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.
February 3rd, 2010 at 5:25 pm
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.
February 3rd, 2010 at 5:27 pm
thanks anyway…that’s not quite what I was saying, but that’s ok.
February 12th, 2010 at 8:05 am
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
February 13th, 2010 at 2:08 am
I’ve tested on IE8. I haven’t had a problem. What version of JQuery are you using? Send me your json object.
February 23rd, 2010 at 10:33 am
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.
February 23rd, 2010 at 10:55 am
The demos are back online (with the correct links). Thanks.
February 24th, 2010 at 3:43 pm
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
July 4th, 2010 at 12:47 pm
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 =-.
July 4th, 2010 at 9:38 pm
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?
July 5th, 2010 at 10:30 am
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 =-.
July 14th, 2010 at 7:56 am
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
July 16th, 2010 at 12:27 pm
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.
August 10th, 2010 at 10:48 am
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.
August 11th, 2010 at 3:08 am
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 …
August 11th, 2010 at 9:00 am
Can you give me more detail? What is your current styling?
August 11th, 2010 at 9:35 am
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.
September 3rd, 2010 at 10:54 am
it doesn’t work at my end, nothing displays :/
September 3rd, 2010 at 10:55 am
it doesn’t work at my end, nothing displays
September 8th, 2010 at 10:12 am
Nice Plug-In
September 9th, 2010 at 8:53 pm
In order for me to help you, I need more information.
September 9th, 2010 at 8:53 pm
In order for me to help, I need more information.
September 14th, 2010 at 12:33 am
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
October 6th, 2010 at 11:16 am
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
November 1st, 2010 at 4:59 pm
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
November 5th, 2010 at 10:21 pm
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!!!
November 5th, 2010 at 10:28 pm
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…
November 8th, 2010 at 10:45 pm
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.
November 9th, 2010 at 1:04 pm
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!
November 14th, 2010 at 12:47 pm
Wouldn’t it be more logical to change the right page before you see the turn effect… I’m just saying!
November 23rd, 2010 at 1:03 am
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?
November 26th, 2010 at 3:37 pm
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!
December 14th, 2010 at 4:34 pm
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.
January 14th, 2011 at 1:59 pm
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.
January 14th, 2011 at 2:04 pm
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.
February 2nd, 2011 at 11:34 pm
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.
June 6th, 2011 at 10:25 pm
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
July 7th, 2011 at 3:31 pm
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.
August 12th, 2011 at 4:36 pm
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….
September 4th, 2011 at 8:57 am
Hello
I want the book to start from right to left as you read arabic books.
Kindly help me in this.
regards,
tanura
October 1st, 2011 at 8:58 am
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,
November 3rd, 2011 at 5:04 am
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
November 23rd, 2011 at 11:44 am
Perfect!…it’s just i was looking for…i hope it will be developed even more.
December 2nd, 2011 at 9:14 am
[...] http://grasshopperpebbles.com/ajax/jquery-plugin-imbookflip-page-turning-without-flash/ [...]
December 15th, 2011 at 4:46 am
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….
December 23rd, 2011 at 4:40 am
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.
December 23rd, 2011 at 4:43 am
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
December 29th, 2011 at 11:50 am
I just completed the changes to the plugin and updated the post. Let me know if you have any questions.
January 2nd, 2012 at 8:41 am
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?