Vorlage:ImageViewer: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ 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|}}}"></div></includeonly>
-<noinclude>
 == Image Viewer Widget ==
 This template creates an interactive image viewer that reveals underlying images by dragging text buttons.
@@ Zeile 34: / Zeile 16: @@
 |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>
@@ Zeile 49: / Zeile 40: @@
 * '''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 ===
@@ Zeile 55: / Zeile 55: @@
 * 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
 </noinclude>