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:
* <NoWiki>{s:FotoramaIncludes}</NoWiki>
* <NoWiki>{s:FotoramaViewer|...}</NoWiki>

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 ===

==== <NoWiki>{s:FotoramaIncludes}</NoWiki> ====
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:''' <NoWiki>{s:FotoramaViewer|...}</NoWiki>

==== <NoWiki>{s:FotoramaViewer|...}</NoWiki> ====
This snippet wraps multiple Foto entries and displays them as a scrolling image gallery.

* '''Parameters:''' Contains one or more nested <NoWiki>{s:Foto|...}</NoWiki> entries.
* '''Must be used with:''' <NoWiki>{s:FotoramaIncludes}</NoWiki> and <NoWiki>{s:Foto}</NoWiki>

==== <NoWiki>{s:Foto|PageId|FileName|Caption}</NoWiki> ====
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 &lt;center&gt; or &lt;b&gt;)

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 ===
* [++Help.AccordionSnippet|Accordion]
* [++Help.AlbumImageSnippet|AlbumImage] (alternate photo display method)
* [++Help.401st-Snippets|Snippets Reference]
Meta Keywords:
Meta Description:
Change Comment:
Modified on 2025/07/09 21:09 by Administrator Categorized as Uncategorized