Vorlage:ImageViewer: Unterschied zwischen den Versionen
Die Seite wurde neu angelegt: „<noinclude> Copyright </noinclude> <includeonly><div class="iv-widget" 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}}}"></div></includeonly><noinclude> == Image Viewer Widget == This template creates an interactive image viewer that reveals underlying images by dragging text buttons. === Usage === <pre…“ |
Keine Bearbeitungszusammenfassung |
||
| (5 dazwischenliegende Versionen derselben Benutzerin werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
<includeonly><div class="iv-widget" | <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-first="{{{first|}}}" | ||
data-second="{{{second|}}}" | data-second="{{{second|}}}" | ||
| Zeile 9: | Zeile 12: | ||
data-left="{{{left|Left}}}" | data-left="{{{left|Left}}}" | ||
data-right="{{{right|Right}}}" | data-right="{{{right|Right}}}" | ||
data-both="{{{both|Both}}}"></div></includeonly><noinclude> | 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 == | == Image Viewer Widget == | ||
This template creates an interactive image viewer that reveals underlying images by dragging text buttons. | This template creates an interactive image viewer that reveals underlying images by dragging text buttons. | ||
| Zeile 21: | Zeile 36: | ||
|third=File:Example3.jpg | |third=File:Example3.jpg | ||
|width=600 | |width=600 | ||
|left= | |align=left | ||
|right= | |left=Lefty | ||
|both= | |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 | |||
}} | }} | ||
</pre> | </pre> | ||
| Zeile 32: | Zeile 60: | ||
* '''third''' - Third image filename (required) - initially visible, covers the other two | * '''third''' - Third image filename (required) - initially visible, covers the other two | ||
* '''width''' - Widget width in pixels (optional, default: 600) | * '''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") | * '''left''' - Left button text (optional, default: "Left") | ||
* '''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) | |||
* '''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 === | === Notes === | ||
| Zeile 41: | Zeile 82: | ||
* Images should have the same aspect ratio for best results | * Images should have the same aspect ratio for best results | ||
* The widget is responsive and will scale to fit its container | * 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 | |||
</noinclude> | </noinclude> | ||