How to use the Highslide Single Image Viewer

== About ==

The '''Highslide''' snippet set allows users to display expandable images with accompanying descriptive text or metadata in a visually engaging, overlay-style window. It is most commonly used for book covers, squadron documents, or media with detailed captions.

There are two related snippets:
* <NoWiki>{s:HighslideSingleImage}</NoWiki>
* <NoWiki>{s:HighslideWindow|...}</NoWiki>

These snippets differ in usage and output — one is standalone, the other allows embedded captions and detail formatting.

=== Required Snippets ===

You can use either snippet independently, but <NoWiki>{s:HighslideWindow|...}</NoWiki> is more flexible for adding multiple lines of descriptive content.

=== Basic Syntax ===

==== Minimal version (image only) ====
@@
{s:HighslideSingleImage}
@@

Usually used when a default image is to be shown with basic Highslide behavior and no accompanying caption or windowed content.

==== Full version with caption window ====
@@
{s:HighslideWindow|{UP}ImageFileName|Title|Caption}
@@

=== Snippet Details ===

==== <NoWiki>{s:HighslideSingleImage}</NoWiki> ====
Displays a single image using Highslide functionality. When clicked, the image expands in an overlay.

* '''Parameters:''' None  
* '''Image Source:''' Automatically detects an associated image on the current page or uses a default  
* '''Use Case:''' When you only need basic expansion without additional descriptive content  
* '''Limitations:''' No caption, title, or detail text — not suitable for documentation-heavy items  

----

==== <NoWiki>{s:HighslideWindow|{UP}Image|Title|ShortTitle|Description}</NoWiki> ====
Displays an image thumbnail that expands when clicked, along with a customizable floating window containing descriptive text. This is commonly used for items like books, documents, or artifacts.

* '''Parameter 1:''' Image location  
  Typically prefixed with `{UP}` to access uploaded files, e.g. `{UP}cover_2_613sq_history.png`

* '''Parameter 2:''' Image title (shown in Highslide header)

* '''Parameter 3:''' Short description or alternate title

* '''Parameter 4:''' Full description — can include:
  * Line breaks: `<br/>`
  * Headings or emphasis: `<b>...</b>`
  * Lists: `<ul><li>...</li></ul>`
  * Paragraphs: `<p>...</p>`

* '''Use Case:''' Ideal for books, historical documents, or artifact listings with rich descriptions

=== Example ===

@@
{s:HighslideWindow|{UP}Cover_2_401bg_bluebook_reprint.png
|401st BlueBook|Pictorial Record of the 401st Bomb Group (BlueBook)
|Edited and compiled under supervision of Capt. Gordon R. Closeway, 401BG Public
 Relations Officer. pub. (orig.) 1946, Newsfoto Publishing Co., San Angelo, Texas.
 300+pp; ill., 7-1/2"w x 10-1/2"h x 1-1/2"t, oversize hard cover, upholstered.

<br/>
<hr style="width: 64px">
<br/>

Reprints similar, except squadron patches not in color, and photos not as 'sharp'.
Many photos now in NARA Still Pictures Collection.
}
@@

=== Tips ===
* Always prefix uploaded image file names with `{UP}` to ensure they resolve correctly
* Keep long descriptions in parameter 4 for HighslideWindow — parameter 3 should be brief
* Use HTML tags sparingly and consistently
* The Highslide viewer will automatically format and resize images for display

=== Use Cases ===
* Digitized book covers with detailed metadata
* Squadron historical documents
* Archive images with structured background info
* Showcasing physical artifacts or publication references

=== Related Snippets ===
* [++Help.FotoramaViewer|FotoramaViewer] – for photo galleries with captions
* [++Help.401st-Snippets|Snippets Reference]
Meta Keywords:
Meta Description:
Change Comment:
Modified on 2025/07/09 21:14 by Administrator Categorized as Uncategorized