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
|left-color=#FF0000
|left-border-color=white
|right-color=#0000FF
|right-border-color=black
|both-color=#00FF00
|both-border-color=yellow
|left-relative-pos=20
|right-relative-pos=20
|both-relative-pos=50
}}
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)
- left-color - Left button text color (optional, default: black)
- left-border-color - Left button border color (optional, default: white)
- right-color - Right button text color (optional, default: white)
- right-border-color - Right button border color (optional, default: black)
- both-color - Both button text color (optional, default: gray)
- both-border-color - Both button border color (optional, default: white)
- left-relative-pos - Initial left button position 0-100 (optional, default: 0)
- right-relative-pos - Initial right button position 0-100 (optional, default: 0)
- both-relative-pos - Initial both button position 0-100 (optional, default: 50)
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
- Initial positions must satisfy: left-relative-pos + right-relative-pos <= 100
- Both button position only applies when left + right < 100