FlipBook Widget for Glow

FlipBook is a widget to be used with Glow, the BBC's Javascript library. It gives you a fun way of interacting with many images when you need to display them in a confined space.

Download FlipBook4Kb - uncompressed and ungzipped

FlipBook is built to high industry standards:

  • Screen reader friendly: FlipBook doesn't change or add to your HTML.
  • Full keyboard access: Each item in the widget is added to the tab index in the page, so you can interact with it using a keyboard.
  • XHTML valid: FlipBook will not invalidate your page.
  • Pure JavaScript: You only have to include one JavaScript file so you don't have to worry about the CSS being applied when JavaScript is disabled.
  • Compliant with BBC Glow's level 1 browser support (supports IE6!).

Getting Started

You will need to have copies of flipBook.js and Glow installed locally. All you need to do is include them in the page like this:

JavaScript

<script type="text/javascript" src="js/glow/core.js"></script>
<script type="text/javascript" src="js/flipBook.js"></script>

Demo one: A simple flipBook

Move your mouse over the images to see them expand.

HTML

<div id="demo_one">
	<ul>
		<li>
			<img src="image_01.jpg" 
				height="220" width="292" />
		</li>
		...
	</ul>
</div>

JavaScript

glow.ready(function(){
	flipBook("#demo_one ul");
});

As you can see in the JavaScript code above you just need to pass in a reference to an ordered or unordered list. This needs to be well formed and each list item needs to contain only one image.

The flipBook will take up as much width as it's parent element will allow it to, the blades (unshown images) will have a width that makes up the remainder of the available space.

Demo two: A customised flipBook

You can change the way each item in the flipBook looks and interacts. You can add additional elements into each item as well as use it as a navigational element for your page:

HTML

<div id="demo_two">
	<ul id="myImages>
		<li>
			<a href="http://www.google.co.uk>
				<span>Title</span>
				<img src="image_01.jpg" 
					height="220" 
					width="292" />
			</a>
		</li>
		...
	</ul>
</div>

JavaScript

glow.ready(function(){
	flipBook("#myImages");
});

Demo three - interacting with flipBook via its API

The flipBook widget has a basic API that gives you the following:

Below is an example that lets you change the image on show in the flipBook with form buttons. When you change the flipBook the input is updated telling you which image is being shown.

HTML

<div id="demo_one">
	<ul>
		<li>
			<img src="image_01.jpg" 
				height="220" width="292" />
		</li>
		...
	</ul>
</div>
<div id="cp">
	<input type="button" id="prev" value="Prev" />
	<input type="text" id="position" value="" 
		disabled="true" />
	<input type="button" id="next" value="Next" />
</div>

JavaScript

glow.ready(function(){
	$ = glow.dom.get;

	// Create a flipBook widget, tell it to update the input 
// box whenever the image changes var myFlipBook3 = flipBook("#demo_three ul", { onChange: function(e) { $('#position').val(myFlipBook3.position); } }); // Event listener for next button glow.events.addListener($('#next'), 'click', function() { myFlipBook3.move(myFlipBook3.position + 1); $('#position').val(myFlipBook3.position); }); // Event listener for prev button glow.events.addListener($('#prev'), 'click', function() { myFlipBook3.move(myFlipBook3.position - 1); $('#position').val(myFlipBook3.position); }); // Give an initial value to the text input $('#position').val(myFlipBook3.position); });

Using flipBook with Gloader

If you want to use the flipBook widget with Gloader (a JavaScript loader available with Glow) in a scoped function, you will need to pass a reference of Glow into the flipBook widget. You can do this like so:

JavaScript

gloader.load(
	["glow", "1", "glow.anim", "glow.dom", "glow.events"],
	{
		async: true,
		onLoad: function(glow) {
			glow.ready(function() {
				flipBook("#example_one ul", 
					{}, 
					glow
				);
			});
		}
	}
);

Note that you will need to define the modules "glow.anim", "glow.dom" and "glow.events".