Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

JQuery Plugin: imBookFlip. Page Turning without Flash

Monday, October 26th, 2009

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 with that positioned absolutely on a page (position: absolute).

First we load the necessary files:

^?View Code HTML

<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.

^?View Code CSS

#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).

^?View Code HTML

<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.

^?View Code JAVASCRIPT

$(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:

^?View Code CSS

.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.

^?View Code JAVASCRIPT

$(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.

^?View Code CSS

.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.

^?View Code HTML

<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.

^?View Code JAVASCRIPT

$(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:

^?View Code HTML

<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.

^?View Code JAVASCRIPT

$(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'}
	});
});

Demos

To view demos of the imBookFlip plugin, go to: http://grasshopperpebbles.com/demos/.

The plugin can be downloaded from Google Code or JQuery Plugins.

Enjoy.

Categories: Ajax, plugins
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

28 Responses to “JQuery Plugin: imBookFlip. Page Turning without Flash”

Sage Says:
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? =-.
admin Says:
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.
Sage Says:
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? =-.
Christina Says:
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
FireDragon Says:
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
admin Says:
January 2nd, 2010 at 10:30 am

You can add anything inside each div, to include links to other web pages.
FireDragon Says:
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.
Jono Says:
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.
admin Says:
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.
Holly Says:
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?
admin Says:
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?
Holly Says:
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.
admin Says:
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.
Holly Says:
February 3rd, 2010 at 5:27 pm

thanks anyway…that’s not quite what I was saying, but that’s ok.
Russell Says:
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
admin Says:
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.
bboy Says:
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.
admin Says:
February 23rd, 2010 at 10:55 am

The demos are back online (with the correct links). Thanks.
Dax Says:
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
Tom Says:
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 =-.
admin Says:
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?
Tom Says:
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 =-.
tom davis Says:
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
admin Says:
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.
Dan Says:
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.
Sebest Says:
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 …
admin Says:
August 11th, 2010 at 9:00 am

Can you give me more detail? What is your current styling?
Sebest Says:
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.