Vorlage:ImageViewer: Unterschied zwischen den Versionen

Aktuelle Version vom 28. Juni 2025, 18:31 Uhr

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

@@ Zeile 1: / Zeile 1: @@
+<includeonly><div class="iv-widget"
+style="{{#switch:{{{align|}}}
+|left=margin-right: auto; margin-left: 0;
+|right=margin-left: auto; margin-right: 0;
+|center=margin-left: auto; margin-right: auto;
+|#default=margin-left: auto; margin-right: auto;
+}}"
+data-first="{{{first|}}}"
+data-second="{{{second|}}}"
+data-third="{{{third|}}}"
+data-width="{{{width|600}}}"
+data-left="{{{left|Left}}}"
+data-right="{{{right|Right}}}"
+data-both="{{{both|Both}}}"
+data-left-tooltip="{{{left-tooltip|}}}"
+data-right-tooltip="{{{right-tooltip|}}}"
+data-both-tooltip="{{{both-tooltip|}}}"
+data-left-color="{{{left-color|}}}"
+data-left-border-color="{{{left-border-color|}}}"
+data-right-color="{{{right-color|}}}"
+data-right-border-color="{{{right-border-color|}}}"
+data-both-color="{{{both-color|}}}"
+data-both-border-color="{{{both-border-color|}}}"
+data-left-relative-pos="{{{left-relative-pos|0}}}"
+data-right-relative-pos="{{{right-relative-pos|0}}}"
+data-both-relative-pos="{{{both-relative-pos|50}}}"></div></includeonly>
+<noinclude>
 == Image Viewer Widget ==
 This template creates an interactive image viewer that reveals underlying images by dragging text buttons.