CSS Codes
CSS Layouts

Utilizing the onphotoclick event handler and built in Lightbox

The onphotoclick event handler is your primary method of assigning behaviour to your album images, such as load a larger version of the image in a new window or lightbox when they are clicked on. By default it's set up to take advantage of the built in lightbox script, to show the thumbnail image again but in its original dimensions:

new phpimagealbum({
 albumvar: myvacation, //ID of photo album to display (based on getpics.php?id=xxx)
 dimensions: [3,2],
 sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]
 autodesc: "Photo %i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
 showsourceorder: true, //Show source order of each picture? (helpful during set up stage)
 onphotoclick:function(thumbref, thumbindex, thumbfilename){
  thumbnailviewer.loadimage(thumbfilename, "fit2screen")
 }
})

The onphotoclick event handler is automatically fed 3 parameters:

  • thumbref: A DOM reference to the photo clicked on.  thumbref.src then would return the image's full URL.
  • thumbindex: The source order of the photo clicked on. Starts at 0.
  • thumbfilename: The file name of the photo clicked on, stripped of the domain and directory path info (ie: "ontheboat.jpg"). Contrast that with probing the DOM reference thumbref.src, which would return "http://www.mysite.com/myimages/ontheboat.jpg".

The built in Lightbox script, on the other hand, is invoked by calling:

  • thumbnailviewer.loadimage(imagefiletoshow, width, height)

Where:

  • imagefiletoshow: URL of image to show. If the image is in the same directory as the current page, you can just enter the image's file name.
  • width: Width of the image when it's shown in pixel unit (ie: 250), or use the keyword "fit2screen" instead to have the script auto resize large images to fit the screen horizontally.
  • height: Height of the image when it's shown in pixel unit (ie: 200),, If width is set to "fit2screen", this parameter has no bearing.

Lets take a look at some possible  onphotoclick set ups then, starting with the default one.

Scenario 1:

The following set up, which comes default with the script, loads the thumbnail images shown on the page again, but in the image's native dimensions, via the built in LightBox script:

 onphotoclick:function(thumbref, thumbindex, thumbfilename){
  thumbnailviewer.loadimage(thumbref.href, "fit2screen")
 }

Scenario 2:

Lets say you want your thumbnail images when clicked on to load a different, larger version of the photo. This means you have two sets of images- the thumbnail set which are small and compact in file size, plus a corresponding set of the same photos that are large in size, and should only be shown on demand. Here's how you might configure onphotoclick for such a set up:

 onphotoclick:function(thumbref, thumbindex, thumbfilename){
  thumbnailviewer.loadimage("http://www.mysite.com/large/" + thumbfilename, "fit2screen")
 }

Here I'm assuming the larger images are kept in the directory "/large" on my site and carry the exact same file name as its thumbnail counterparts. What if your larger images uses different file names? As long as they are variations of the thumbnails', such as "house_large.jpg" versus "house.jpg", it's fairly simple to integrate as well:

 onphotoclick:function(thumbref, thumbindex, thumbfilename){
  var largefilename=thumbfilename.split(".")[0] + "_large" + ".jpg" //take "house.jpg", and change it to "house_large.jpg"
  thumbnailviewer.loadimage("http://www.mysite.com/large/" + largefilename, "fit2screen")
 }

Note that if you're using two sets of images, they should always be placed in different directories.

Scenario 3:

Moving along, what if you want each thumbnail image when clicked on to load an actual web page inside a pop up window? The "thumbindex" parameter can be handy here:

 onphotoclick:function(thumbref, thumbindex, thumbfilename){
  if (thumbindex==0) //if this is the 1st image within album (based on source order)
   window.open("http://www.google.com")
  else if (thumbindex==1)  //if this is the 2nd image within album (based on source order)
   window.open("http://www.yahoo.com")
 }

Recall from the documentation that "thumbindex" reflects the source order of the thumbnail image clicked on as it appears inside the containing directory. You can easily find out the source order of all images by turning on the showsourceorder option in your initialization code.

If you have a lot of thumbnail images- and hence a lot of corresponding URLs you need to associate with them- it's easier to define an array of URLs, then modify the code inside onphotoclick to just open the correct URL within that array. For example:

var myurls=["http://google.com", "http://yahoo.com", "http://cnn.com", "http://msnbc.com", "http://cssdrive.com"]

 onphotoclick:function(thumbref, thumbindex, thumbfilename){
  window.open(myurls[thumbindex])
 }

Scenario 4:

Going back to displaying an enlarged version of each thumbnail when they are clicked on, what if you don't want to use the built in Lightbox effect, but another script instead? As long as the script lets you directly load an image via a function call, something similar to thumbnailviewer.loadimage(thumbfilename), then it will work.

Take the instance of the Facebox script, which lets you launch an image by calling jQuery.facebox('Some content to show'). So to use Facebox as the PHP Album script's image viewer, simply install Facebox in the same page, then modify onphotoclick to call jQuery.facebox():

 onphotoclick:function(thumbref, thumbindex, thumbfilename){
  jQuery.facebox('<img src="' + thumbref.src +' "/>')
 }

And viola!

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post