Vorlage:ImageStack: Unterschied zwischen den Versionen
Die Seite wurde neu angelegt: „<noinclude> == Usage == The '''ImageStack''' template creates interactive image stack widgets that can display background images with clickable overlay sequences. Multiple consecutive ImageStack templates automatically line up horizontally when there's enough space. === Basic Syntax === <pre> {{ImageStack |background=File:BackgroundImage.jpg |overlay1=File:Overlay1.png |overlay2=File:Overlay2.png |width=400 |height=300 |title=Interactive diagram |align=…“ |
Keine Bearbeitungszusammenfassung |
||
| (3 dazwischenliegende Versionen derselben Benutzerin werden nicht angezeigt) | |||
| Zeile 12: | Zeile 12: | ||
|width=400 | |width=400 | ||
|height=300 | |height=300 | ||
| | |title0=Background description | ||
|title1=First overlay description | |||
|title2=Second overlay description | |||
|align=center | |align=center | ||
|mouseimage=File:CustomCursor.png | |||
|ellipsis_invert=false | |||
}} | }} | ||
</pre> | </pre> | ||
| Zeile 20: | Zeile 24: | ||
; background (required) | ; background (required) | ||
: The main background image file | : The main background image file | ||
; overlay1, overlay2, overlay3, overlay4, overlay5 | ; overlay1, overlay2, overlay3, overlay4, overlay5, overlay6, overlay7, overlay8, overlay9, overlay10 | ||
: Optional overlay images that appear when clicking/tapping | : Optional overlay images that appear when clicking/tapping | ||
; width, height (recommended) | ; width, height (recommended) | ||
: Dimensions in pixels - used for responsive calculations and optimal display | : Dimensions in pixels - used for responsive calculations and optimal display | ||
; | ; title0, title1, title2, title3, title4, title5, title6, title7, title8, title9, title10 | ||
: Optional alt text and tooltip for | : Optional alt text and tooltip for individual files (title0=background, title1=first overlay, etc.) | ||
; align | ; align | ||
: Alignment for single widgets: left, center, right | : Alignment for single widgets: left, center, right | ||
; size | ; size | ||
: Size hint for optimal spacing: small (widgets <300px), large (widgets >800px) | : Size hint for optimal spacing: small (widgets <300px), large (widgets >800px) | ||
; mouseimage | |||
: Optional custom cursor image file (32x32px or 64x64px recommended, square, black and white) | |||
; ellipsis_invert | |||
: Boolean to invert ellipsis symbol for contrast against background (default: false) | |||
=== Examples === | === Examples === | ||
| Zeile 42: | Zeile 50: | ||
|width=600 | |width=600 | ||
|height=400 | |height=400 | ||
| | |title0=World map base layer | ||
|title1=Population density overlay | |||
|title2=Climate zones overlay | |||
|title3=Economic development overlay | |||
|mouseimage=File:ZoomCursor.png | |||
}} | }} | ||
</pre> | </pre> | ||
| Zeile 48: | Zeile 60: | ||
==== Horizontal Gallery ==== | ==== Horizontal Gallery ==== | ||
<pre> | <pre> | ||
{{ImageStack|background=File:Photo1.jpg|overlay1=File:Info1.png|width=200|height=150|size=small}} | {{ImageStack|background=File:Photo1.jpg|overlay1=File:Info1.png|width=200|height=150|size=small|title0=Photo 1|title1=Photo 1 information}} | ||
{{ImageStack|background=File:Photo2.jpg|overlay1=File:Info2.png|width=200|height=150|size=small}} | {{ImageStack|background=File:Photo2.jpg|overlay1=File:Info2.png|width=200|height=150|size=small|title0=Photo 2|title1=Photo 2 information}} | ||
{{ImageStack|background=File:Photo3.jpg|overlay1=File:Info3.png|width=200|height=150|size=small}} | {{ImageStack|background=File:Photo3.jpg|overlay1=File:Info3.png|width=200|height=150|size=small|title0=Photo 3|title1=Photo 3 information}} | ||
</pre> | </pre> | ||
| Zeile 61: | Zeile 73: | ||
|height=600 | |height=600 | ||
|align=center | |align=center | ||
| | |title0=Large detailed image | ||
|title1=Annotated version | |||
|ellipsis_invert=true | |||
}} | }} | ||
</pre> | </pre> | ||
| Zeile 67: | Zeile 81: | ||
==== Mixed Size Layout ==== | ==== Mixed Size Layout ==== | ||
<pre> | <pre> | ||
{{ImageStack|background=File:MainChart.jpg|width=500|height=300}} | {{ImageStack|background=File:MainChart.jpg|width=500|height=300|title0=Main chart view}} | ||
{{ImageStack|background=File:DetailView.jpg|width=300|height=300}} | {{ImageStack|background=File:DetailView.jpg|width=300|height=300|title0=Detail view}} | ||
</pre> | </pre> | ||
| Zeile 108: | Zeile 122: | ||
* Each widget operates independently | * Each widget operates independently | ||
* Device rotation preserves widget state | * Device rotation preserves widget state | ||
* Custom cursor follows mouse movements at 60fps with light easing (~100ms) | |||
* Ellipsis symbol indicates available overlays (can be inverted for contrast) | |||
'''Browser Compatibility:''' | '''Browser Compatibility:''' | ||
| Zeile 114: | Zeile 130: | ||
* Works with MediaWiki 1.41, Minerva Neue, and Vector 2022 skins | * Works with MediaWiki 1.41, Minerva Neue, and Vector 2022 skins | ||
* Responsive design adapts to container width | * Responsive design adapts to container width | ||
* Custom cursor requires MouseHandler module (graceful fallback to standard cursor) | |||
=== Migration from Previous Versions === | === Migration from Previous Versions === | ||
'''Existing single widgets:''' | '''Title parameter changes:''' The single "title" parameter has been replaced with individual title parameters: | ||
* Old: <code>title=Widget description</code> | |||
* New: <code>title0=Background description|title1=First overlay description</code> | |||
'''Existing single widgets:''' Replace <code>title=</code> with <code>title0=</code> for background image descriptions. | |||
'''To create horizontal layouts:''' Simply place multiple ImageStack templates consecutively without blank lines between them: | '''To create horizontal layouts:''' Simply place multiple ImageStack templates consecutively without blank lines between them: | ||
'''Before (single | '''Before (single titles):''' | ||
<pre> | <pre> | ||
{{ImageStack|background=File:Image1.jpg|width=300|height=200}} | {{ImageStack|background=File:Image1.jpg|width=300|height=200|title=Image 1}} | ||
{{ImageStack|background=File:Image2.jpg|width=300|height=200}} | {{ImageStack|background=File:Image2.jpg|width=300|height=200|title=Image 2}} | ||
</pre> | </pre> | ||
'''After ( | '''After (individual titles):''' | ||
<pre> | <pre> | ||
{{ImageStack|background=File:Image1.jpg|width=300|height=200}} | {{ImageStack|background=File:Image1.jpg|width=300|height=200|title0=Image 1 background}} | ||
{{ImageStack|background=File:Image2.jpg|width=300|height=200}} | {{ImageStack|background=File:Image2.jpg|width=300|height=200|title0=Image 2 background}} | ||
</pre> | </pre> | ||
</noinclude><includeonly><div class="imagestack-widget imagestack-initialized{{#if:{{{align|}}}| imagestack-align-{{{align}}}}}{{#if:{{{size|}}}| imagestack-{{{size}}}}}" data-background="{{{background}}}"{{#if:{{{overlay1|}}}| data-overlay1="{{{overlay1}}}"}}{{#if:{{{overlay2|}}}| data-overlay2="{{{overlay2}}}"}}{{#if:{{{overlay3|}}}| data-overlay3="{{{overlay3}}}"}}{{#if:{{{overlay4|}}}| data-overlay4="{{{overlay4}}}"}}{{#if:{{{overlay5|}}}| data-overlay5="{{{overlay5}}}"}}{{#if:{{{overlay6|}}}| data-overlay6="{{{overlay6}}}"}}{{#if:{{{overlay7|}}}| data-overlay7="{{{overlay7}}}"}}{{#if:{{{overlay8|}}}| data-overlay8="{{{overlay8}}}"}}{{#if:{{{overlay9|}}}| data-overlay9="{{{overlay9}}}"}}{{#if:{{{overlay10|}}}| data-overlay10="{{{overlay10}}}"}}{{#if:{{{width|}}}| data-width="{{{width}}}"}}{{#if:{{{height|}}}| data-height="{{{height}}}"}}{{#if:{{{title0|}}}| data-title0="{{{title0}}}"}}{{#if:{{{title1|}}}| data-title1="{{{title1}}}"}}{{#if:{{{title2|}}}| data-title2="{{{title2}}}"}}{{#if:{{{title3|}}}| data-title3="{{{title3}}}"}}{{#if:{{{title4|}}}| data-title4="{{{title4}}}"}}{{#if:{{{title5|}}}| data-title5="{{{title5}}}"}}{{#if:{{{title6|}}}| data-title6="{{{title6}}}"}}{{#if:{{{title7|}}}| data-title7="{{{title7}}}"}}{{#if:{{{title8|}}}| data-title8="{{{title8}}}"}}{{#if:{{{title9|}}}| data-title9="{{{title9}}}"}}{{#if:{{{title10|}}}| data-title10="{{{title10}}}"}}{{#if:{{{mouseimage|}}}| data-mouseimage="{{{mouseimage}}}"}}{{#if:{{{ellipsis_invert|}}}| data-ellipsis-invert="{{{ellipsis_invert}}}"}}> | |||
</noinclude><includeonly><div class="imagestack-widget imagestack-initialized{{#if:{{{align|}}}| imagestack-align-{{{align}}}}}{{#if:{{{size|}}}| imagestack-{{{size}}}}}" data-background="{{{background}}}"{{#if:{{{overlay1|}}}| data-overlay1="{{{overlay1}}}"}}{{#if:{{{overlay2|}}}| data-overlay2="{{{overlay2}}}"}}{{#if:{{{overlay3|}}}| data-overlay3="{{{overlay3}}}"}}{{#if:{{{overlay4|}}}| data-overlay4="{{{overlay4}}}"}}{{#if:{{{overlay5|}}}| data-overlay5="{{{overlay5}}}"}}{{#if:{{{width|}}}| data-width="{{{width}}}"}}{{#if:{{{height|}}}| data-height="{{{height}}}"}}{{#if:{{{ | |||
</div></includeonly> | </div></includeonly> | ||