Photo Album script v2.0
Mar 11th, 07': Updated to v2.0, which adds support for multiple albums on the same page, ability to run custom code when an image is clicked on.
Description: Photo Album script is ideal for displaying multiple images at once, with links to cycle through additional batches of images. But that's just the beginning. Here are some highlights:
- Customize the album's dimensions as desired, such as 3 by 2 images, 4 by 5 images etc.
- For each image, specify an optional description, link, and link target.
- The script automatically builds navigational links to allow the viewer to cycle between "batches" of images within the album.
- Ability to run your own code whenever an image within the album is clicked
on (via
onselectphoto
). This enables you to modify the default the behaviour when a user clicks on the images, such as load their associated links in a pop up window instead.
Now go show off your photo album!
Demo
Step 1: Add the following CSS to the <head> section of your page:
Since the script references an external .js file, you need to download the below:
photogallery.js (right click, and select "Save As")
Step 2: Add the below code to the <BODY> section of your page where you wish the photo album to appear:
All configurations to the script is done inside the code of Step 2. As shown, the basic code looks like this:
//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl",
"opt_linktarget"]
var myvacation=new Array()
myvacation[0]=["../photo1.jpg", "", "photo1-large.jpg"]
myvacation[1]=["photo2.jpg", "Our car", ""]
myvacation[2]=["photo3.jpg", "Our dog", "photo3-large.jpg"]
myvacation[4]=["photo5.jpg", "Our Computer", "http://www.google.com", "_new"]
//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight,
opt_[paginatetext_prefix, paginatetext_linkprefix])
var thepics=new photogallery(myvacation, 3, 1, '700px', '600px')
Whereby you first define an array holding your images, using the syntax:
Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]
Then, create an album using it, by calling new photogallery()
and assigning
it to an arbitrary but unique variable:
var thepics=new photogallery(myvacation, 3, 1, '700px', '600px')
The 1st parameter should be the name of your array image, the 2nd and 3rd are
the number of cols and rows to generate for this album, and the 4th and 5th ('700px
'
and '600px
'), the dimensions of the table that holds the entire
photo album. Now, this function also supports an optional 6th parameter, which
if defined lets you customize the pagination div's text. For example:
var thepics=new photogallery(myvacation, 3, 1, '700px', '600px', ['Browse Gallery:', 'Page'])
Note the ['Browse Gallery:', 'Page']
parameter at the end- this
will modify the text shown inside the pagination DIV's very beginning, and the
beginning of each nav link, respectively (so it becomes "Page 1
", "Page
2
" etc).
Using the custom event handler "onselectphoto"
Here comes the fun part- this script lets you customize the behaviour when the
user clicks on each image within the photo album. By default, if an image is
hyperlinked, clicking on it will obviously go to that URL. But what if you wish
to override this behaviour, and instead, load the link in a custom popup window
instead? Simply call "onselectphoto
" after a photo album has been
created, and define your custom code to execute. The skeleton syntax looks like
this:
thepics.onselectphoto=function(img,
link){
//my custom code to execute
//The parameter "img" contains a reference to the clicked on image object
//The parameter "link" contains a reference to the clicked on link object, if
this image is hyperlinked
}
Note that "thepics
" should be the arbitrary/unique variable name you assigned
the photo album when you created it earlier. So, for example, to get all the
image links inside the photo album to open in a new window, you would do this:
thepics.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
return false //cancel default action when clicking on image, by returning false
instead of true
}
Here's an example: