Lightbox module

Overview

Lightbox module
Author:	Brian Holland
Introduced in Version:	4.1.2, Revision 1338
Introduction Date:	25 July, 2007

Lightbox Album is a PGV module which uses a different way of laying out individual media in PHPGedView with the help of a version of Clearbox JS 2 script. It is primarily called via an "Album" tab on the individual page, but is also operable from many pages within PGV which have media thumbnails.

Using the Album Tab

Basically, the media is grouped into four categories, or rows: Photo, Document, Census and Other, based on the Type tag of entered into the Media Object field. For example all media with Type of card, certificate, document, magazine etc. are displayed in the "Document" group.

Album row	Type tag in the Media Object
Photo	photo, painting, map, or tombstone
Document	card, certificate, document, magazine, manuscript, or newspaper
Census	electronic, microfiche(fiche), microfilm(film)
Other	no Type set, other, audio, or video
Footnotes	(Notes fields of the displayed media)

When a thumbnail is clicked, the image is viewed via a modified version of the "Clearbox JS 2" viewer. The Thumbnail must be linked with a 'viewable' file: graphic (.jpg, .jpeg, .gif, or .png), video, URL, pdf etc. The URL link in the Media object will result in opening the page in the viewer, and a .pdf file will be displayed in pdf viewer if installed. The normal popup viewer is used for other file types which will not work with "Lightbox Album" for the moment.

Usage

Image / Slideshow viewer

To view an image

Click on any thumbnail. The title of the image will appear at the top of the overlaid image. The Details link at the bottom will open the Media Object page.

To use zoom mode

• Enable Zoom

When the green Plus icon at the bottom right of the image is visible, Zoom is already enabled. Use the mouse wheel up and down (or keys i and o) to resize. The icon will change to a red Minus. When the image is zoomed, use the keyboard arrow keys, or mouse drag/drop to move the image around.

• Disable Zoom

1. Double-click inside the image, or
2. Click on the red Minus icon at the inside bottom right, or
3. Use the keyboard "z" key.

Note: The slideshow must be paused to see the Zoom icons.

To close an image

1. Click on the red X icon at bottom right, or
2. Click outside the image area.

To view the Next or Previous image

As you mouse over the image when not in Zoom mode, a < symbol will appear on the left side, and a > on the right. Click anywhere in the right half of the image to see the next image. Click anywhere in the left half to see the previous one.

To jump to any other image in the Album

As you mouse over the top 1 cm of the image when not in Zoom mode, a thumbnail Gallery will appear. If necessary, move the mouse cursor left and right to make other sections of this thumbnail Gallery show. Click any Gallery thumbnail to jump diectly to the associated image. Next, Previous and Jump may be done whether the slideshow is running or paused.

To run the slide show

Click on the Start icon at bottom left to start the slide show. If there is a sound track file, the Speaker icon will appear. Click on the Speaker icon to toggle the sound track on and off. Click on the Pause icon to stop the slide show. Music will still play until speaker icon is clicked off again, so you can still listen to the music whilst zooming a paused image. Clicking the Start icon will resume the slide show again.

The slideshow will go through each image, exhausting one group before moving to the next.

Note: Thumbnails which are not images, such as PDF files and audio, book, and video Media types, may be viewed individually, but will not be in the slide show.

Album page

The Album page has several features that can be used for navigation and editing

Navigation

Use the View Album ' table at the right of the image icon table to directly choose another person's Album view.

Editing

If you have editing rights, you will see the Edit and Remove links with each icon. Those can be turned off by clicking the Turn Edit Mode off option. You can also add a new Media object and link the person to an existing media object. Note that the administrator can disable the Edit and Remove links

Configuration

With Administrator privileges you can control aspects of the lightbox / slideshow viewer (accessed via the Admin page or the album tab of the Individual page):

Individual Page - Media Tab

(Show - Hide) This option lets you determine whether the Media tab should be shown on the Individual Information page. When this option is set to Hide, only the Album tab will be shown.

Individual Page - Album Tab Header

(Icon - Text - Both) This option lets you determine whether the header area of the Album tab, which contains links to control various aspects of the Lightbox module, should contain only icons, only text, or both. The Icon only option is probably only applicable to Admins very familiar with this page, since you won't see any indication of each icon's function until your mouse hovers over the icon.

Individual Page - Album Tab Thumbnails

(Icon - Text) This option lets you determine whether the links area below each thumbnail should show an icon or text. The links shown here let you edit the Media object's details or delete it.

Multimedia Page - Thumbnails

(None - Text - Icon - Both) This option lets you determine whether the Links area above the Media object's details in the MultiMedia list should contain only icons, only text, or both. The links shown here let you perform various editing actions on the Media object in question. The None option completely hides these links, and thus acts as if the user did not have any editing rights.

Slide Show speed

This option determines the length of time each image should be displayed before the Slide Show displays the next image in the sequence.

Image Transition speed

(None - Normal - Double - Warp) This option lets you specify the transition speed when the image changes. This selection is applied during the slideshow. It is also applied when you move to the next or previous image when the slideshow is not running. The None option eliminates image transitions so that the new image immediately replaces the old without visible adjustment of the new image's dimensions.

URL Window dimensions

When clicking on a URL image thumbnail, this option lets you specify the Lightbox URL Window dimensions in pixels. This should normally be less than your current browser window dimensions, and certainly less than your screen resolution.

Acknowledgements

Many thanks to Nigel Osborne (kiwi_pgv) for his invaluable help in preparing this module.

Thanks to George Krupa [1] for Clearbox JS 2