Speed:
Book Flip
Are You Ready Kids?I can't hear you.Aye-Aye Captain!OHHHHHHHWho lives in a pineapple under the sea?Sponge Bob Square Pants!Absorbent and yellow and pourous is he!Sponge Bob Square Pants!If nautical nonsense be something you wish!Sponge Bob Square Pants!Then drop on the deck and flop like a fish!Sponge Bob Square Pants!Ready?Sponge Bob Square PantsSponge Bob Square PantsSponge Bob Square PantsSponge BobSquare Paaaaannttss!!!
DescriptionDecember 08 2011 - Updated: Totally javascript Book Flip for page turn effects.Bookflip engine has been totally rebuilt for better modern browser performance(IE8 & 9). Place any html code within the books pages - div id="pages" (#no longer inside bookflip div). Each code block within the pages div will be treated as a seperate book page. Setting are adjustable in the script. Please read the readme.txt file inside the zip. Download Zip Bookflip V4.0 ExamplesBookflip 4 exampleBookflip Shrek Myer Catalog with Lightbox and Image Map August 11 2008 - Updated: Totally javascript Book Flip for page turn effects. Sound Manager is the only Flash component courtesy of Scott Schiller (schillmania.com). Ideal for Online story books as a teachers aid or just for fun. Now has the ability to utilize html within each page and still maintain proper layout. Place any html code within the books pages - div id="myBook". Each code block within the myBook div will be treated as a seperate page. Setting are adjustable in the script. Download Zip Bookflip V3.0 ExamplesMyer CatalogFun with Borders Gratitude Free LicenceThis Script is wholly developed and owned by CoastWorx.com. Copywrite: http://wwww.coastworx.com/ Licenced under Creative Commons - Non Commercial | Legal Code for Non Commercial use.
- You are free to use this script so long as all copywrite notice/s stays intact in its entirety.
Commercial Licence per Domain:A Commercial Licence has the same conditions as a Free licence with these exceptions:
CommentsCallum Burns: How would you get this: http://flowplayer.org/tools/demos/tooltip/any-html.htm to work in each page? It doesn't seem to work at all. Help! Thanks Will: @Callum, I don't do jquery. priya: Hi ,
Will: no, not as part of the release. You need a custom solution. Cammie: Cheers Will. Buttons working and am working on sitting it on a book cov design I did in ps. I am having a problem with the divs as not sure what all divs I should be containing within my (call it book frame div). I also am trying to make the last page transparent by using a PNG and it disnae seem to like that - it keeps replacing the transparent PNG with the 2nd last pg, my book is 58 pages but I need to make it 59 to get the last pages to turn. Back pg is pg58 and I make pg 59 blank Cammie: Also mate, sorry for being a pest but - is there a limit to the amount of pages as I saw somewhere back on this forum where to alter the bookflip.js file but those values aren't there in mine... Will: @Cammie, hi, transparency is an unsolved issue. See similar posts by Norbert.
Cammie: Hey Will, eventuallt managed to get round the transparency issue by making my final page image the same background as the cover image I have it sitting on. It works perfectly in Chrome, Safari and Firefox but for some reason pages don't show up at all in IE9. Is there a compatabilty problem with explorer? Thanks again for all your advice Will: @Cammie, send me a url where i can see it via the contact page. Cammie: ok mate its temporarily here: http://www.heggie5.webspace.virginmedia.com/mosLink.html
Will: @Cammie, you have js error due to : <script type="text/javascript"><!--
Cammie: Will, you were spot on... Thanks, and yes my friend the link will be reinstated. Thanks for all your help Aaron: Hi Will, how would I make it so that clicking a page acts as an <a> link instead of turning the page? Will: @Aaron, there are a few ways it can be done. Set allowPageClick to false & using html skills, insert whatever element you want to use as the link on the page. Aaron: Great, thanks for the fast reply Will! Callum Burns: Hi Will, Thanks for the reply. Scrapped that idea for now anyway! Haha! How would I go about adding the shadow to the right side of the pages? Will: @Callum, it's no easy thing. See function createShadow(). David: Hi Will, thanks for a great script. I wondered if it was possible to have elements on one page overlap across the centre margin into the next page, allowing for layouts that aren't a 50/50 split? Many thanks - David Will: @David, each page is a div container, so no. Depending on the element you could recreate that effect but i suspect you know that already. Pan: Hello Will,
Will: @Pan, show me an example where its been succesfully done with js. On the other hand there are plenty of ligtbox type scripts around if thats what your refering to. Cheers Oscar Benjamin: Hi All - Great little script! Thanks Will - However my images are too large for my book siz (current size 500 X 561) How do i in the div where i specify my images changes or manipulate the size of my images. Hope to hear from you soon. Oscar (SA) tinycottage: Can a video be placed on a page (div) ? or does it all have to be jpeg? Will: @Oscar, @tiny, resize your images i guess. Please note the script drives html, it is independent of images or any other element/s so its up to you what you use to build your pages. sarah: can anyone plz send m the code ?? Dave: I don't have a link from a website (testing but I have the same problem with the last two pages been blank and the last page as the back cover any solution?? Will: @Dave, check your html for properly closed elements. Try the validator http://validator.w3.org/
Jordan Bryan: will, this is an amazing script, thank you. i am using your script for a website for one of my university modules on scripting which involves a lot of javascript. this javascript is needed to be implemented within the book flip and i cant seem to add javascript (such as lightbox, slideshows) into this script. any sugestions? thanks!! Will: @Jordon: Bookflip certainly works correctly with other javascript, including lightbox modules or slideshows however with any scripting there is the possibility of the cross-use of Variable Names or clashes with broad calls to html elements. Check what the specific js errors are & why. Daryll Chu: can we have two instances of the bookflip on the same page? Will: @Daryll: possible if you use iframes. Daryll Chu: is there an example for it? Joe: Will. This is great thank you. I would like to make it so that I can have links on my page depending on the image you click on, however due to the (allowPageClick option) it is not possible. Any idea on what could be done to alter this, maybe directing it to only flip the page when corner is clicked. Also, I would like to go ahead and use this template further, does it need to be purchase or what are the specific copyrights. Please let me know. Thanks again and amazing job Will: Yes, it is possible already. ahref tag works fine, and there are plenty of ways to do it just like normal html.
Will: Licencing agreement: http://coastworx.com/bookflip.php#licence Joe: Will. Thank you
Joe: Will
JA: Deff am going to purchase.
Will: On page-1 of the demo above is text "Aye-Aye Captain." This is a ahref link and it works as expected opening a new tab.
Will: To prevent the page turning when using IMAGE MAPS edit bookflip.js and find function whichElement(e,dir){
Will: a quick lightbox and image map demo on the first page here: http://www.coastworx.com/myerv4.html Diantha: I want to click on an image or text (i.e. in an index) inside an <a href="#go></a> and have the book jump to the bookflip page with that name <a name="go"> but it just jumps to the bottom of the web page and doesn't flip to the page I want. I named my div's so the drop down shows the names of the pages; I want it to work like that - when I click on a image and/or linked index. Can you help? Will: @Dianth: autoflip() is what you want as the call has to ignite javascript turn effect.
Diantha: Sweet! Works like a charm now! I love this bookflip script - just what I was looking for. Thanks for making it available. And thanks for your quick answer to my question. Aaron: Hi Will,
Jeff: Hi Will,
Will: @Jeff: I can only guess without see it or description of specific error. I can take a look if you like, send me the url via my contact form. Will: @Aaron: Ditto my answer to Jeff. It's not possible to diagnose without seeing the specific installation, could be a million things. My code is valid however I can't vouch for anyone else's. Could be variables with the same name across scripts, anything really.
Aaron: Hmmm... I'm guessing the code duplicates whats inside the pages div, into the bookflip div? That would make sense as to why it's doubling the images. selvabalaji: <a href="#go" target="blank" onclick="autoFlip(5);return false;">text or image here</a>
50 of 472 comments (part 3) [ « ] [ » ] [ * ]
|