401st Bomb Group (H) Association
The best damned outfit in the USAAF!
Welcome Guest, you are in: Login

Search this website: »

How to Use the Fotorama Viewer

About

The Fotorama Viewer is a custom photo gallery viewer that allows you to display multiple images with captions and navigation controls. It uses a clean, mobile-friendly layout and is ideal for slideshows or grouped visual storytelling.

Required Snippets

To use the Fotorama Viewer, you must use these two snippets together:
  • {s:FotoramaIncludes}
  • {s:FotoramaViewer|...}

The viewer is populated using one or more Foto snippets placed inside the FotoramaViewer block.

Basic Syntax

{s:FotoramaIncludes}

{s:FotoramaViewer|
    {s:Foto|PageId|FileName.jpg|Caption text...}
    {s:Foto|PageId|FileName2.jpg|Another caption...}
}

Snippet Details

{s:FotoramaIncludes}

This snippet includes the necessary JavaScript and CSS for the Fotorama viewer to work. It should be placed once per page, ideally above the viewer itself.

  • Parameters: None
  • Must be used before: {s:FotoramaViewer|...}

{s:FotoramaViewer|...}

This snippet wraps multiple Foto entries and displays them as a scrolling image gallery.

  • Parameters: Contains one or more nested {s:Foto|...} entries.
  • Must be used with: {s:FotoramaIncludes} and {s:Foto}

{s:Foto|PageId|FileName|Caption}

This defines an individual photo in the viewer.

  • PageId: The numeric ID of the page where the photo is stored (e.g., `p2769`)
  • FileName: The exact file name of the image (e.g., `i502.jpg`)
  • Caption: Optional caption text (can include HTML like <center> or <b>)

You may include formatting such as headings, paragraphs, or centering using wiki or HTML markup within the caption.

Example

{s:FotoramaIncludes}

{s:FotoramaViewer|
    {s:Foto|p2769|i501.jpg|<center>Edward arrives at the Gemeentehuis</center>When he arrived at the town hall he was greeted by fifty people including veterans and embassy staff.}
    {s:Foto|p2769|i502.jpg|<center>Veterans of Many Wars</center>All were waiting to thank Edward for his service.}
}

Tips

  • You can include any number of Foto entries inside a FotoramaViewer block.
  • Captions can be long, and may include paragraphs or basic inline formatting.
  • The PageId must match the page where the image is stored — otherwise, the image will not load.
  • Avoid inserting unrelated content between Foto entries.

Use Cases

  • Event photo slideshows
  • Crash site visits or return trips
  • Veterans' ceremonies
  • Step-by-step pictorial explanations

Related Snippets