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:
CommentsJoe: Not a problem. Thank you. This can be used multiple times under that domain, correct? Will: Correct, a licence pertains to a domain. There is no limit on how many instance under the licenced domain. Juan Carlos: Hello Will
Will: Hi Juan. In that case the shadow would be beneath the page and no longer visible if i understand correctly. You could try use the browsers transparency filter rather than the shadow image but you will need a different filter for each browser. In the js file there is currently a check to see if the users browser is IE6. That should give you an idea how to do it. Frances: HI will I am a student trying to make a flipbook for my portfolio and what I had wanted was a cover page making it appear as the book was closed first and a content page is there anyway to adjust this code to do this? Thank you Frances: Hi Will I got the table of content page but I am still trying remove the left side panel ONLY ON THE FIRST PAGE to give the appearance of a closed book please advise thank you Will: Hi. The only way is to leave the first page div blank. Frances: ok Thank you I figured that part out. Thank you for replying. Edward: Thanks for the script, but it doesn't seem to work on Internet Explorer. It works on Google Chrome. Any solutions? Your help would be appreciated Will: @Edward. Are you saying the above demo/s dont work on internet explorer? They seem fine for me even on IE6. What version of IE are you using and what is the JS error msg if any. Jonathan: Hi Guys
Will: No maximums. Check your html beyond page 49 is valid or error free. Check for closed / > elements where required. Also check the image rescources are available. Tarak: Hi will i have a prlm how to display number of images from folder in flipbook my code in html page using php . Tarak: <ul id="lstImages" class="imagesSource">
Will: hi. You can certainly build your pages or page content on the fly with php or any other language however you still need to make sure your code outputs the correct syntax with properly formed and closed elements. You should check the source code output for errors. Damen: Thanks Will for your great script. I noted one strange effect when viewing your demo in mobile browser (I use Android phone). There is a black vertical line at the left page.
Jursten: Im trying to make a flip page where you need to press a navigation button to go to the next page instead of pressing just anywhere on the page. How is this possible? - i tried to change the click event from the global div to a new made div, but this div only shoes in the first page. Not second.. Jursten: Sorry nevermind my last question, solution found. Will: @Damen, I see the black lines. That would likely be a border around the png image placed by your browser by defauly. To knock the border out try experiment with the style calls in bookflip.js eg. myPngDiv.style.background="transparent url(black_gradient.png) top right repeat-y"; Frank: How can you use this more than once on a single page ? Will: @Frank. Currently bookflip is by id which you cant have multiples with the same id. You need a naming convention for each bookflip div and a routine to search for and identify each bookflip div so each can be initialized. Depends on how your page is built eg on the fly. Id recomend a graphic replica link to each book and open in new window or popup. rizora: I am unable to change the list order in Ascending OR Descending. Can i Change it? rizora: Dear, during arranging list, leave blank pages is possible. 0509: @rizora. Yes you can sort the dropdown list. Plenty of Sort functions on the net. Run the js sort routine after the bookflip.js has completed. janine: Hi
Will: @janine. Is the grey your referring to the default background colour set by the user settings if the script eg. pageBackgroundColor="#CCCCCC"; If the images are loaded they shouldn't be reloading and there is nothing in my script to cause that that i believe. I would need to see your installation to see whats going on. Are you using frames maybe? Dr Bhanot: I attempted using this code for making a flip page booklet online but it wouldn't work on some browsers especially certain versions of Internet Explorer - so I gave up. Any remedy? Thanks. Will: What browsers specifically? Does the demo above work in those browsers? Luxanna: Hey!
Will: Thanks Luxanna. There is no limit. This usually boils down to a html error introduced by the user.Check for any malformed or unclosed eg.</> elements. Contact me via email and I can take a look at your site if needed. Luxanna: Thank you for your Answer. I cant find the error. :/ was searching the whole night >.<
Will: @Luxanna: Your html is invalid (http://validator.w3.org/) try remove the duplicate </script> tag just above </head> and start from there. BTW an external link back to coastworx.com is a requirement of the free licence. Luxanna: Thank you for your Answer. Don't work... ._. So frustating.. But ty for trying. and oh, i link u back, just take a look here:
Will: You still have a stray closing </div> near pages div at the time of writing. Miguel: ¿is there a way to preload pages? Miguel: Thank you, the script works incredibly fast !! Yeli Design: i love it , it s working fast thanks rizora: Can we make a hyperlink with in the filpbook pages. for Page one has a link for page 30. is it possible? rizora: Can i Insert Table of content in flipbook? jw: @rizora: Yes and Yes. Linking pages is desribed further up the comments from memory. rizora: can i omit the following pages in dropdown list:
Will: If you mean display the dropdown but omit some pages. Yes. Give those pages a name eg name="omit" . Then add a call in the function that builds the list to skip those with a name "omit". rizora: Will! can u help me to build this function? Will: @rizora: try edit: function createList(dv,num){
Anonym: Thank you, script working but dropdown menu not working properly. Can you tell me that how to build content page within the flipbook? Will: You could have a content page within the book flip, however trying to create it dynamically with js and inserting it after the pages are built as opposed to a manually creating the page and its links for inclusion as a div page increases the degree of dificulty. What would be the point of building it and hiding it on the first page for example you would need to navigate back to the first page continually. Mark Ernest: Hi! great script, I was just wondering how can I make it automatically flip the page for a designated time(seconds) then loop back at the start? Either starting it when the page opens or by clicking a button? Will: Hi Mark. Been answered before i think further up. Havent tried but it should be doable. There is a function already to flip to a specified page from another page within the book. You could use it inside a timeout function to cycle thru the pages. These types are modifications take a fair amount of time to do properly though so its not something i can offer up one off. Cheers. songhu: Hi ~
Will: Songhu, yes it is possible to create a script for that but the current script is not configurable for it. It would need a rewrite. 50 of 472 comments (part 1) [ » ] [ * ]
|