Template:ImageViewer: Difference between revisions

Line 15:

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

data-right-tooltip="{{{right-tooltip|}}}"

data-both-tooltip="{{{both-tooltip|}}}"></div></includeonly>

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

Line 34:

Line 43:

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

Line 49:

Line 67:

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

Line 55:

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

@@ Line 15: / Line 15: @@
 data-left-tooltip="{{{left-tooltip|}}}"
 data-right-tooltip="{{{right-tooltip|}}}"
-data-both-tooltip="{{{both-tooltip|}}}"></div></includeonly>
+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 ==
@@ Line 34: / Line 43: @@
 |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>
@@ Line 49: / Line 67: @@
 * '''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 ===
@@ Line 55: / Line 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>