Template:ImageViewer

Image Viewer Widget

This template creates an interactive image viewer that reveals underlying images by dragging text buttons.

Usage

{{ImageViewer
|first=File:Example1.jpg
|second=File:Example2.jpg
|third=File:Example3.jpg
|width=600
|align=left
|left=Lefty
|right=Righto
|both=Bother
|left-tooltip=Drag to reveal first image
|right-tooltip=Drag to reveal second image
|both-tooltip=Drag both buttons simultaneously
}}

Parameters

first - First image filename (optional) - shown when left button is dragged
second - Second image filename (optional) - shown when right button is dragged
third - Third image filename (required) - initially visible, covers the other two
width - Widget width in pixels (optional, default: 600)
align - Horizontal widget alignment (optional, "left", "right" or "center", default: "center")
left - Left button text (optional, default: "Left")
right - Right button text (optional, default: "Right")
both - Both button text (optional, default: "Both")
left-tooltip - Tooltip for left button (optional)
right-tooltip - Tooltip for right button (optional)
both-tooltip - Tooltip for both button (optional)

Notes

Third image is required
If first or second images are not specified, the third image will be used with filters applied
Images should have the same aspect ratio for best results
The widget is responsive and will scale to fit its container