Xerte Community Documentation

User Tools

Site Tools

Trace:
media_thumbnail_viewer_page

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
media_thumbnail_viewer_page [2022/12/02 10:53] – removed - external edit (Unknown date) 127.0.0.1media_thumbnail_viewer_page [2023/09/25 09:07] (current) – [New Image: Core Properties] jsmith
Line 1: Line 1:
 +====== 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.
 +
 +===== 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}}