Search: For:
Browsing Single Category
ttljournal support Tips › Tip Id: 3521 | Permalink

"First Time Visitor" gallery navigation tutorial

Tip ID: 3521
Created By: 2009-JAN-27 12:46:45 [TTLJ:Vitaliy]
Updated By: 2009-JAN-27 20:35:39 [TTLJ:Vitaliy]
Status: Open
Severity: Normal
Read Only: No
9898
2009-JAN-27 12:46:45
Moderator
 
 
Registered On: Jan 2009
Total Posts: 19
For this tutorial we'll be using the following "demo" gallery:

   Nikon D3/Nikon 35mm f/2.0 D-AF LENS - NI352DAF

(open it in another browser window so you can try some of the things we talk 
about in this tutorial)
Image Panes
Once you open the above gallery the first thing you'll notice are the two image 
panes:
2009-01-27_1019.png
"Current Image Pane" on the left displays the current image of the gallery.  
Current Image can be manually selected by clicking on one of the thumb images 
in the "Gallery Index Pane" or automatically advanced to by the gallery 
auto-play feature.

You can always interrupt automatic play by manually clicking on the thumb 
images in the "Gallery Index Pane".  "Gallery Index Pane" will show scroll bar 
on the right if there are more images than can be shown at once.

If the current image draws your interest you can pause the auto-play feature by 
pointing a mouse anywhere in the "Current Image Pane" and as long as the mouse 
is pointed there the gallery will not advance forward.

To get a closer look at the Currently Displayed image you can click on "Current 
Image Pane" which will bring up a larger version of the image in the center of 
the page with the background grayed out.  This is called the "lightbox" View 
and it allows you to navigate the images by using your keyboard's Left (<-) and 
Right (->) Arrows.  You can escape the "lightbox" View by using your keyboard's 
"Esc" key or by clicking on the "CLOSE X" link underneath the image.
Text Panes
If you look below the "Current Image Pane" you'll notice two additional "Text 
Panes":
2009-01-27_1024.png
"About This Image" pane displays the caption of the currently displayed image 
and it will display scroll bar on the right if the text is larger than what can 
be displayed at once.  "About This Image" pane has the same 
"mouse-over-to-pause" functionality as "Current Image Pane", allowing you to 
pause the auto-play of the gallery if you mouse over it.

Right below the "About This Image" pane are two optional panes (they can be 
enabled or disabled by the gallery author):

   - Keywords Pane
   - Story Pane

NOTE: in the gallery used for this tutorial there's no "Keywords Pane"

The "Keywords Pane" has the familiar "mouse-over-to-pause" functionality 
allowing you to pause the auto-play.  And if the gallery author attached a 
story to the current gallery the "Story Pane" with it's own Heading is 
displayed below the "About This Image" pane.  In this example, the title of the 
story is "Why Choose Nikon 35mm f/2.0 D-AF LENS?".  The "Story Pane" is static, 
so it's permanently displayed regardless of the current image context.
[edited by: TTLJ:Vitaliy at 13:42 (CST) on Jan. 27, 2009]