); //-->
JavaScript Code for
Photo Book

By Vic Phillips     www.OurSidecars.org.uk



A 'Slide Show' presented in the form of a book.
Select 'Forward' or 'Back' and the pages appear to turn like a real book.
A photo is presented on the left page and accompanied text on the right page.
Paging forward and the text on the old right page reduces revealing a new page,
as the page passes the center the new photo expands to cover the old photo on the left page.
Paging back and the photo reduces on the left page and as the page passes the center
the text on the new right page expands to cover the old page.

Photo Book controls consist of 'Forward' and 'Back' buttons and 'BookMark' control.
The title of each photo is displayed in a drop down menu.
Select the Photo of interest from the drop down menu,
then select 'Find' to turn the pages to stop with the selected photo displayed,
or select 'Show' to go directly to the selected photo.

All photos must be of the same size.
The Page size is set by the size of photo to be displayed and the required photo border.
The Photo Book is displayed centered in the window. The Top(Y) position is set for the application.
If the photos are too large to be displayed correctly their size is adjusted for the window size.

To automatically reposition and resize Photo Book during window resize
include onResize="javascript:PBkBrowCk();" in the <body> tag.

The required Photos, Photo Title and Photo Text are set for the application.
Two additional images are required for the top and bottom covers.
The amount of Photo Text that can be displayed is dependent on the photo(page) and text size.
For example a Page size of 330*235 can accomodate about 350 charactors at 12pt text size.
The photo padding, text size, page turn speed, page and binder colour can also be set for the application.
The Photo Title can be included in the right page text if required.

The code includes image preload functions to load the featured photos in sequence,
the load status is displayed in the window status bar.

The code is compatible with IE4+ and NS6.
All variables, IDs etc. are prefixed with 'PBk' to aid compatibility with other JSs.
The code is in two parts.
Part 1 contains customised variables and image locations,
The size of Part 1 is dependent on the number of images.
Part 2 contains the main code, the size is <13K.
Part 1 must positioned before Part 2.
Both parts can be in either the header or body of the host document.
However the code has been split as Part 2 is best placed in an external .JS file.


Copy this page to grab the code.
please leave the credit intact.