Vorlage:ImageViewer: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 12: | Zeile 12: | ||
data-left="{{{left|Left}}}" | data-left="{{{left|Left}}}" | ||
data-right="{{{right|Right}}}" | data-right="{{{right|Right}}}" | ||
data-both="{{{both|Both}}}"></div></includeonly> | data-both="{{{both|Both}}}" | ||
data-left-tooltip="{{{left-tooltip|}}}" | |||
data-right-tooltip="{{{right-tooltip|}}}" | |||
data-both-tooltip="{{{both-tooltip|}}}"></div></includeonly> | |||
<noinclude> | <noinclude> | ||
== Image Viewer Widget == | == Image Viewer Widget == | ||
| Zeile 28: | Zeile 31: | ||
|right=Righto | |right=Righto | ||
|both=Bother | |both=Bother | ||
|left-tooltip=Drag to reveal first image | |||
|right-tooltip=Drag to reveal second image | |||
|both-tooltip=Drag both buttons simultaneously | |||
}} | }} | ||
</pre> | </pre> | ||
| Zeile 40: | Zeile 46: | ||
* '''right''' - Right button text (optional, default: "Right") | * '''right''' - Right button text (optional, default: "Right") | ||
* '''both''' - Both button text (optional, default: "Both") | * '''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 === | === Notes === | ||
Version vom 28. Juni 2025, 08:12 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
}}
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