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 |
||
| Zeile 14: | Zeile 14: | ||
|title=Interactive diagram | |title=Interactive diagram | ||
|align=center | |align=center | ||
|mouseimage=File:CustomCursor.png | |||
|ellipsis_invert=false | |||
}} | }} | ||
</pre> | </pre> | ||
| Zeile 30: | Zeile 32: | ||
; 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 43: | Zeile 49: | ||
|height=400 | |height=400 | ||
|title=World Data Visualization | |title=World Data Visualization | ||
|mouseimage=File:ZoomCursor.png | |||
}} | }} | ||
</pre> | </pre> | ||
| Zeile 62: | Zeile 69: | ||
|align=center | |align=center | ||
|title=Detailed Analysis | |title=Detailed Analysis | ||
|ellipsis_invert=true | |||
}} | }} | ||
</pre> | </pre> | ||
| Zeile 108: | Zeile 116: | ||
* 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 124: | ||
* 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 === | ||
| Zeile 137: | Zeile 148: | ||
[[Category:MediaWiki templates]] | [[Category:MediaWiki templates]] | ||
[[Category:Interactive content]] | [[Category:Interactive content]] | ||
</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:{{{title|}}}| data-title="{{{title}}}"}}> | </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:{{{title|}}}| data-title="{{{title}}}"}}{{#if:{{{mouseimage|}}}| data-mouseimage="{{{mouseimage}}}"}}{{#if:{{{ellipsis_invert|}}}| data-ellipsis-invert="{{{ellipsis_invert}}}"}}> | ||
</div></includeonly> | </div></includeonly> | ||