header

Adding photo captions, dates, and bylines

You may add captions, dates, and bylines to photos by passing one or more of the three optional parameters of the PhotoViewer's add(imageUrl, caption, date, byline) method: 

[...]
var viewer = new PhotoViewer();
viewer.add('photo1.jpg', 'A special photo', '11/01/2006 10:12', 'Amy Smith');
viewer.add('photo2.jpg', 'Holidays in Spain', '07/12/2006 15:43');
viewer.add('photo3.jpg', 'Just another caption');
viewer.add('photo4.jpg');
[...]
Bylines are positioned at the bottom-right corner of the browser window. You can adjust the distance from the bottom and right-hand edges by adding the following parameters at the beginning of the script: The code snippet below positions the byline at 30 pixels from the right-hand edge and 20 pixels from the bottom. 
[...]
BYLINE_POSITION_RIGHT = 30;
BYLINE_POSITION_BOTTOM = 20;
var viewer = new PhotoViewer();
viewer.add('photo1.jpg', 'A special photo', '11/01/2006 10:12', 'Amy Smith');
[...]
Captions, dates, and bylines are added to photos in this example.

Using multiple slideshows

Need multiple slideshow viewers on the same page? No problem! You may create as many PhotoViewer objects as you like, just make sure that they are given different variable names. For example: 

[...]
var viewer1 = new PhotoViewer();
viewer1.add('photo1.jpg');

var viewer2 = new PhotoViewer();
viewer2.add('photo2.jpg');
[...]
<a href="javascript:void(viewer1.show(0))">Slideshow 1</a>
<a href="javascript:void(viewer2.show(0))">Slideshow 2</a>
[...]

Customizing the slideshow animation

The following JavaScript methods can be applied to tweak the parameters of the slideshow animation. These methods should be invoked on your PhotoViewer instance:

The example below automatically starts a slideshow while disabling the panning effect: 

[...]
var viewer = new PhotoViewer();
viewer.setSlideDuration(3000);
viewer.disablePanning();
viewer.enableAutoPlay();
[...]
The effect can be seen here.

Customizing the viewer's appearance

For those of you wishing to customize the viewer's appearance, here are some additional JavaScript methods. These should be invoked on your PhotoViewer instance:

Here is an example: 

[...]
var viewer = new PhotoViewer();
viewer.setBackgroundColor('#ffffff');
viewer.setBorderWidth(2);
viewer.setFontSize(11);
viewer.setShadeColor('#807872');
[...]
...which creates this effect.

Other Customizations

You may disable certain buttons in the photo viewer's toolbar, or hide the toolbar altogether, by using the following methods of your photo viewer instance:

The setOnClickEvent method can be used to change the action performed when a user left-clicks on an image displayed by the viewer. This method must be called on the photo viewer instance for which you wish to change the on-click behavior:

The code below disables the email and photo links and instructs the photo viewer to start or pause the slideshow animation when a users clicks on the image area: 

[...]
var viewer = new PhotoViewer();
viewer.setOnClickEvent(viewer.startSlideShow);
viewer.disableEmailLink();
viewer.disablePhotoLink();
[...]
You can preview the above example here.

Scripting the slideshow

This sample PHP script package may give you a few ideas on scripting the Slideshow. The example package shows how to implement all the above customization options as simple on/off switches, and includes a function to extract the date and time automatically from an image's EXIF data (if available) and displays it in the viewer (note: this sample package is unsupported, it's merely offered for demonstration purposes).


Copyright (c) 2006 - Klika and TripTracker.net. All rights reserved.