Vorlage:ImageViewer: Unterschied zwischen den Versionen

(4 dazwischenliegende Versionen derselben Benutzerin werden nicht angezeigt)

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|}}}"

Zeile 6:

Zeile 12:

data-left="{{{left|Left}}}"

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>

== Image Viewer Widget ==

This template creates an interactive image viewer that reveals underlying images by dragging text buttons.

Zeile 18:

Zeile 36:

|third=File:Example3.jpg

|width=600

|left=~~Left~~

|align=left

|right=~~Right~~

|left=Lefty

|both=~~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>

Zeile 29:

Zeile 60:

* '''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 ===

Zeile 38:

Zeile 82:

* 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>

@@ 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|}}}"
@@ Zeile 6: / Zeile 12: @@
 data-left="{{{left|Left}}}"
 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 ==
 This template creates an interactive image viewer that reveals underlying images by dragging text buttons.
@@ Zeile 18: / Zeile 36: @@
 |third=File:Example3.jpg
 |width=600
-|left=Left
+|align=left
-|right=Right
+|left=Lefty
-|both=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>
@@ Zeile 29: / Zeile 60: @@
 * '''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 ===
@@ Zeile 38: / Zeile 82: @@
 * 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>