Photo Viewer Instructions
Photo Viewer is very simple to use, and these instructions should make installation easy for someone with limited knowledge of HTML.
1. Create your photo album page
The very first step is to create a web page for your album (or use an existing page). Place the picture, index, caption, and any other controls (like Previous and Next) where you would like them.
2. Loading the JavaScript in your web page
Insert the following text anywhere between the <head> and </head> tags, making sure that photo_viewer.js precedes photo_list.js.
<SCRIPT LANGUAGE="JavaScript1.2" type="text/javascript" src="photo_viewer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" type="text/javascript" src="photo_list.js"></SCRIPT>
Explanation: The first two lines load the JavaScript files that make up the viewer. The first file, photo_viewer.js, contains all of the functionality that enables the viewer. The second, photo_list.js, is where you will set the viewer's parameters and specify photos and captions in a later step.
Now insert the following lines near the very bottom of your page, right before the </body> tag.
<script language="javascript">initPhoto();</script>
<img id="cache" src="http://www.web1marketing.com/images/dot.gif" width="1" height="1">
Explanation: The third line starts the script once the page has mostly loaded. The fourth inserts a one-pixel clear image for precaching images. If the image is omitted, precaching will not work. Note that you may copy the image to your own site if you like or use any image in place of dot.gif.
3. Placing the photo, caption, and index on your page
In your HTML editor, replace the photo, caption, and index (optional) with following tags (or place these elements inside the respective <span> and </span> tags so they get replaced by Photo Viewer):
<span ID="photo">photo</span>
<span ID="caption">caption</span>
<span ID="index">index</span>
You can put them wherever you please, and in any order. You can also use other parameters within the <span> tags to apply formatting, such as 'class' or 'align', however anything between <span ...> and </span> will be replaced by the objects Photo Viewer creates. Note that you can also use <div> and </div> instead of <span> and </span>.
Note: Photo Viewer will only recognize one of each of these elements on your web page.
4. Creating navigation controls
You can create as many navigation controls as you like anywhere on your web page. These controls may also consist of any combination of text and graphics.
Controls such as "previous" and "next" simply use the <a> tag as shown below:
<a href="javascript:void(showPrevious());">Previous Photo</a>
<a href="javascript:void(showNext());"><img src="right_arrow.gif"></a>
The first line shows how to make a text link that results in showing the previous photo using "showPrevious", while the second line demonstrates how to make an image into a next photo button using "showNext".
You can also create links to specific photos using "showPhoto" as in the following example.
<a href="javascript:void(showPhoto(2));">Jump to 2nd photo</a>
5. Creating the list of photos and captions
The photo_list.js file contains sequential entries that look like this:
addPhoto("my-first-picture.jpg", "This is a caption.", "Pic 1");
addPhoto("my-second-picture.gif", "This is another caption.", "Pic 2" );
The first parameter is the file name of the photo (include path info in a different photo). The second parameter is the caption. The third parameter is optional and, if present, will replace the number of the photo in the index.
The order with which you list photos in photo_list.js determines the order in which they appear in your album.
You can include HTML in the captions. For example,
addPhoto("3rd.jpg", "<b>This caption is in bold.</b>");
6. Setting parameters (optional)
Near the top of the photo_viewer.js file is a section where parameters are defined that control Photo Viewer's operation, such as whether or not to show an index. It is strongly recommended that you make no changes to this file. Instead, you can set the parameter values in photo_list.js. Not only will this preserve functionality, it also allows you to customize presentation for each album independently. An example of what you might include in your photo_list.js file to change the index separator:
indexSeparator = ' :-) ';
This results in an index that looks like this:
1 :-) 2 :-) 3 :-) 4 ...
You can also turn on "slide show" mode by default, so that the photos advance automatically after a preset period of time determined by slideDelay (default is 10 seconds):
slideMode = Boolean(true);
slideDelay = 10;
7. Please link to us
Please remember to include a link to http://www.web1marketing.com somewhere on your photo album page. For instance, add the following:
<a href="http://www.web1marketing.com">Photo Viewer courtesy of Web 1 Marketing, Inc.</a>
Enjoy your photo album!
