Template:ImageViewer: Difference between revisions
OlafLangmack (talk | contribs) Created page with "<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> {{ImageViewer |first=File:Example1.jpg |second=Fi..." |
OlafLangmack (talk | contribs) No edit summary |
||
| Line 1: | Line 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|}}}" | ||
| Line 6: | Line 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}}}"></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. | ||
| Line 18: | Line 24: | ||
|third=File:Example3.jpg | |third=File:Example3.jpg | ||
|width=600 | |width=600 | ||
|left= | |align=left | ||
|right= | |left=Lefty | ||
|both= | |right=Righto | ||
|both=Bother | |||
}} | }} | ||
</pre> | </pre> | ||
| Line 29: | Line 36: | ||
* '''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") | ||
| Line 38: | Line 46: | ||
* 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 | ||
[[Category:Templates]] | |||
</noinclude> | </noinclude> | ||
Revision as of 19:36, 24 June 2025
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
}}
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")
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