JavaScript Photo Album

JsPhoto Index Page

Introduction

JsPhoto is a light-weight JavaScript photo album for your home page. The main features of JsPhoto include:

Fast viewing; JsPhoto preloads images in background so that users can switch quickly between images.
View images in any order: JsPhoto features an index page with thumbnails and this allows users to view the images in the order they choose.
Works everywhere: JsPhoto is written completely in client-side JavaScript which works on even the simplest web-servers.
JsPhoto works on all major browsers including Opera, Mozilla, FireFox, Safari and IE.

To see JsPhoto in action, please see The JsPhoto Demonstration at eppunormaali.net.

Download & Install JsPhoto

Download JsPhoto 1.3 Installation Package.

To install JsPhoto, unpack the tar.gz file and copy the files contained in this package to your web server. (Use UltimateZip to unpack the file, for example.) The installation package contains a fully working myalbum.html photo album. You can test this photo album also in your very own PC without installing a web-server. To test the album, open the myalbum.html file in your web-browser.

Create Photo Albums

Prepare Images for JsPhoto

Each photograph in the JsPhoto album comes in two different sizes: a small thumbnail image is shown in the index page and a large image is shown when the user clicks on a thumbnail. The thumbnail image should be at most 122x90 pixels in size, and the large image should be at most 935x635 pixels. Images that exceed these limits are automatically resized to fit the available screen space.

Create JsPhoto Parameter File

Each JsPhoto album requires a parameter file, which defines the pictures that belong to the photo album. Create this parameter file by copying the myalbum.js file from the installation package to an appropriate name, and edit the file using your favourite text editor. The file should contain:

/* base directory (URL) containing images, leave empty to use current dir */
jsphotodir = "";

/* title of gallery */
jsphototitle = "Kuopio at summer";

/* array of photos */
jsphotoalbum = new Array(
  /* thumbnail        large image     title                placeholder */
  "thumbnail1.jpg",  "natural1.jpg",  "North of Puijo",    "",
  "thumbnail2.jpg",  "natural2.jpg",  "Kuopio city",       ""/*<--no comma*/
);

/* name of a cookie to track visited photos */
jsphotocookiename = "jsphotomyalbum";

/* uncomment to use the same style sheet irrespective of the resolution */
//jsphotocss = "small.css";

/* uncomment to set maximum size of an image irrespective of the resolution */
//jsphotomaxw = 740;
//jsphotomaxh = 420;

/* uncomment to set the number of thumbnails irrespective of the resolution */
//jsphotothumbsx = 4;
//jsphotothumbsy = 3;

Modify the template parameter file as follows:

Insert the base URL of your images to jsphotodir variable or leave the variable empty if the images are found from the very same directory as the parameter file.
Set the title of the photo album to jsphototitle variable.
Specify thumbnail images, large images and titles in jsphotoalbum array. The first column contains the name of the thumbnail image, the second column contains the name of the matching large image, and the third column contains an optional title for the image. The fourth column is a place holder for a longer description. Please leave this column empty for now.
If you have multiple photo albums in your server, make up a unique name for your photo album and insert the name to jsphotocookiename variable. JsPhoto then stores the list of pictures visited by user to an equivalently named cookie.
Optionally, to force jsphoto to always show up in a certain size, uncomment the jsphotocss, jsphotomaxw, jsphotomaxh, jsphotothumbsx and jsphotothumbsy settings by removing the "//" comment marks. This allows you to force a specific style sheet file, specify the maximum size of an image and set the number of miniature images in the index page. Please note, however, that changing these settings may need to be accompanied by changes in the style sheet.

Embedd JsPhoto to Your Site

JsPhoto albums are embedded into HTML pages those may contain additional images and text provided by you. To create this HTML file, copy myalbum.html file from the distribution package to an appropriate name and edit the file in a text editor. The file should countain:

<html>
<head>
<title>My Photo Gallery</title>
<script language="JavaScript" src="jsphoto.js"></script>
<script language="JavaScript" src="myalbum.js"></script>
<script language="JavaScript"><!--
document.write("<link rel=\"stylesheet\" href=\""+jsphotocss+
"\" type=\"text/css\" media=\"screen,projection\" />");
//--></script>
</head>

<body>
<h1>My Photo Gallery</h1>
<p>
Click on a question mark for help.
</p>

<!-- load photo album -->
<script language="JavaScript"><!--
jsphoto();
//--></script>
<NOSCRIPT>
Javascript disabled; cannot show photo gallery.
</NOSCRIPT>
<!-- end photo album -->

</body>
</html>

In line 5, replace the myalbum.js with the name of the .js file that you created earlier.

To use Finnish language in your photo album, insert the following HTML code just prior to /head tag:

<script language="JavaScript" src="fi.js"></script>

Try the photo album by loading the HTML page into the web browser. If you cannot see the images, open JavaScript console to see JavaScript errors. Often, these errors reveal the source of the problem. Once you see the images, modify titles and colors of the HTML file according to your taste. If you want to modify JsPhoto style, please note that the tiny.css, small.css and normal.css files each contain a style for one resolution. Unless you have fixed the resolution, the colors and font sizes have to be specified separately to each file.