New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

Photo Album script v2.0

Author: Dynamic Drive

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

Directions Developer's View

Step 1: Add the following CSS to the <head> section of your page:

Select All

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:

Select All

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: