Adding photo captions and dates

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

[...]
var viewer = new PhotoViewer();
viewer.add('photo1.jpg', 'A special photo', '11/01/2006 10:12');
viewer.add('photo3.jpg', 'Just another caption');
viewer.add('photo4.jpg');
[...]

For example, captions and dates are added to photos in this viewer.

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 may be used to tweak the parameters of the slideshow animation. These methods should be invoked on your PhotoViewer instance:

• setSlideDuration(duration)
  Sets the time interval between slide transitions, in milliseconds. Default value: 4000.
• disablePanning() / enablePanning()
  Disables / enables the panning effect (enabled by default).
• disableFading() / enableFading()
  Disables / enables the fade-out/fade-in transitions (enabled by default).
• enableAutoPlay() / disableAutoPlay()
  If enabled, the slideshow animation starts automatically when the viewer is shown (disabled by default).
• enableLoop() / disableLoop()
  If enabled, the slideshow animation will continue at the first image after the last image is displayed (disabled by default).

The example below automatically starts a slideshow, without 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:

• setBackgroundColor(color)
  Sets the photo's background and border color. The color parameter may be a CSS color specification or the keyword “transparent”. Default value: "#000000".
• setBorderWidth(width)
  Sets the photo's border width in pixels. Setting it to 0 would remove the border. Default value: 5.
• disableShade() / enableShade()
  Disables / enables the shaded background (enabled by default).
• setShadeColor(color)
  Sets the color of the shaded background. The color parameter should be a CSS color specification. Default value: "#000000".
• setShadeOpacity(opacity)
  Sets the opacity of the shaded background. The opacity parameter should be a real number between 0.0 (fully transparent) and 1.0 (fully opaque). Default value: 0.7.
• setFontSize(size)
  Sets the font size that is used to display image numbers and captions, in pixels. Default value: 10 pixels.

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:

• disableEmailLink() / enableEmailLink()
  Disables / enables the 'email photo' button in the toolbar (enabled by default).
• disablePhotoLink() / enablePhotoLink()
  Disables / enables the 'link to photo' button in the toolbar (enabled by default).
• disableToolbar() / enableToolbar()
  Hides / shows the toolbar (enabled by default).

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:

• viewer.setOnClickEvent(viewer.close)
  Closes the slideshow viewer (this is the default behavior).
• viewer.setOnClickEvent(viewer.startSlideShow)
  Starts/stops the slideshow animation.
• viewer.setOnClickEvent(viewer.permalink)
  Opens the currently displayed image in a new window.

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.