Xerte Community Documentation

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Media > Thumbnail Viewer ======

This [[pagetypes|page]] displays a series of images as a ribbon of thumbnails along the top of the page. When the learner clicks on a thumbnail the image displays in a larger size below the ribbon. A lightbox can be added to each image, which appears on mouseover of the image. The lightbox can include text and internal or external links.

:!: **New in 3.14**.  This page now works fully on smaller, mobile devices. When thumbnails are clicked, the related information will open in a lightbox.


===== Example demo =====

{{url>https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#thumbnailviewer}}

or view at [[https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#thumbnailviewer|Xerte Page Types - Media: Thumbnail Viewer]] (opens in new tab)

===== Editor interface =====

{{:xerte-media-thumbnailviewer-editor.jpg|Screenshot of Media > Thumbnail Viewer page in editor}}

==== Top Level: Core Properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Page Title | Text that appears in header of published page  | Text |   |
| Page Text | Text displayed below the thumbnail ribbon when the learner lands on the page.  This text disappears when the learner clicks on one of the thumbnails. | Text+ (Toolbar) | You can add images, tables and other content through the Text editor.  |

==== Top Level : Optional Properties ====

There are no **page-specific** optional properties. 

See [[optional_properties#General optional properties|General Optional Properties]]


==== Top Level: Language Options ====

^ Property ^ Description ^ Type ^ Additional information ^
| Next Button Tip | Text that appears on mouseover of the  > icon to the right of the thumbnail ribbon | Text | Default - "Next"  |
| Prior Button Tip | Text that appears on mouseover of the  < icon to the left of the thumbnail ribbon | Text+ (Toolbar) | Default - "Previous" |

After you have created the settings for the page you need to add images. Click on **New Image**.

{{ :xerte-media-thumbnailviewer-newimage.jpg?400 }}

==== New Image: Core Properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Tree Label | Adds a label that appears in the page structure for authors. This label is not visible to learners | Text |   |
| Image Text | The text that appears in the lightbox on mouseover of the image  | Text+ (Toolbar) | %%You can add other content, e.g. audio, through the Image Text editor%%  |
| Image: File | Add the image here, through the Media Browser  | Link to Media Browser |   |
| Image: Description | Add a description for Accessibility | Text |   |
| Link from Image | Adds a link activated by clicking on the image. {**None**/Original Image/Specified URL} | Drop-down | "Original Image" opens a new tab displaying the image. |
| URL | Add URL here if "Specified URL" is selected (see above) | URL |   |

{{tag>pagetype media}}