Vorlage:Gallery2: Unterschied zwischen den Versionen

Aktuelle Version vom 18. September 2019, 07:33 Uhr

Stelllt bis zu zehn Bilder nebeneinander dar

Wird ein Parameiter einklappen angegeben, wird die Gallery als ausklappbar dargestellt

Die Legende muss außer beim letzten Bild zwingend angegeben werden ggf. als leerer Parameter: {{ Gallery | Bildname1.png | | Bildname2.png }}

Optionale Parameter	Beschreibung	Default
\| i=	Anzahl der Bilder in einer Zeile bei 1200px Viewport	3
\| in=	Größe des Bildes n entsprechend Anzahl der Bilder in einer Zeile bei 1200px Viewport	z.B.: i4=7
\| ausklappen= \| einblenden=	Beschriftung der Schaltfläche im eingeklappten Zustand	ausklappen
\| einklappen= \| ausblenden=	Beschriftung der Schaltfläche im ausgeklappten Zustand	einklappen
\| collapsed=	true , falls die Tabelle per Default eingeklappt werden soll	false

Diese Dokumentation befindet sich auf einer eingebundenen Unterseite [ Bearbeiten].
Syntaxseite erstellen.
Anwendungsbeispiele und Funktionalitätsprüfungen befinden sich auf der Testseite [Bearbeiten].
Liste der Unterseiten.

@@ Zeile 1: / Zeile 1: @@
-<table><tr><td
+<templatestyles src="Vorlage:Gallery.css" /><br clear=all>
-	padding: 0px; vertical-align: top;><span style="
+{{#vardefine: class-width_i1 | {{#switch: {{{i1|{{{i|{{{w|3}}} }}} }}}
-	display: block;
+	|1=flexelement items_1
-	border: 1px solid #dddddd;
+	|2=flexelement items_2
-	border-radius: 4px;
+	|3=flexelement items_3
-	width: calc({{{w|100px}}}+2);
+	|4=flexelement items_4
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|5=flexelement items_5
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|6=flexelement items_6
-	margin-left:{{{ml|3px}}};
+	|7=flexelement items_7
-	line-height: {{{lh|calc(100%+2px)}}};
+	|8=flexelement items_8
- 	padding: 4px;
+	|9=flexelement items_9
-	{{#if: {{{2|}}} | padding-bottom: 0px; }}
+	|10%=flexelement items_10
-">[[Datei:{{{1|}}} | {{{w|100px}}}]]{{#if: {{{2|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{2|}}} }}</span>|}}</span></td>{{#if: {{{3|}}}
+	}}
-	|
+}}{{#vardefine: class-width_i2 | {{#switch: {{{i2|{{{i|{{{w|3}}} }}} }}}
-	{{!}} style="padding: 0px; vertical-align: top;" {{!}}<span style="
+	|1=flexelement items_1
-	display: inline-block;
+	|2=flexelement items_2
-	border: 1px solid #dddddd;
+	|3=flexelement items_3
-	border-radius: 4px;
+	|4=flexelement items_4
-	width:calc({{{w|100px}}}+2);
+	|5=flexelement items_5
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|6=flexelement items_6
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|7=flexelement items_7
-	margin-left:{{{ml|3px}}};
+	|8=flexelement items_8
-	line-height: {{{lh|calc(100%+2px)}}};
+	|9=flexelement items_9
- 	padding: 4px;
+	|10%=flexelement items_10
-	{{#if: {{{4|}}} | padding-bottom: 0px; }}
+	}}
-">[[Datei:{{{3|}}} | {{{w|100px}}}]]{{#if: {{{4|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{4|}}} }}</span>|}}</span>|&#8291;}}{{#if: {{{5|}}}
+}}{{#vardefine: class-width_i3 | {{#switch: {{{i3|{{{i|{{{w|3}}} }}} }}}
-	| {{!}}{{!}} style="padding: 0px; vertical-align: top;" {{!}}<span style="
+	|1=flexelement items_1
-	display: inline-block;
+	|2=flexelement items_2
-	border: 1px solid #dddddd;
+	|3=flexelement items_3
-	border-radius: 4px;
+	|4=flexelement items_4
-	width:calc({{{w|100px}}}+2);
+	|5=flexelement items_5
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|6=flexelement items_6
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|7=flexelement items_7
-	margin-left:{{{ml|3px}}};
+	|8=flexelement items_8
-	line-height: {{{lh|calc(100%+2px)}}};
+	|9=flexelement items_9
- 	padding: 4px;
+	|10%=flexelement items_10
-	{{#if: {{{6|}}} | padding-bottom: 0px; }}
+	}}
-">[[Datei:{{{5|}}} | {{{w|100px}}}]]{{#if:{{{6|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{6|}}} }}</span>|}}</span>|&#8291;}}{{#if: {{{7|}}}
+}}{{#vardefine: class-width_i4 | {{#switch: {{{i4|{{{i|{{{w|3}}} }}} }}}
-	| {{!}}{{!}} style="padding: 0px; vertical-align: top;" {{!}}<span style="
+	|1=flexelement items_1
-	display: inline-block;
+	|2=flexelement items_2
-	border: 1px solid #dddddd;
+	|3=flexelement items_3
-	border-radius: 4px;
+	|4=flexelement items_4
-	width:calc({{{w|100px}}}+2);
+	|5=flexelement items_5
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|6=flexelement items_6
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|7=flexelement items_7
-	margin-left:{{{ml|3px}}};
+	|8=flexelement items_8
-	line-height: {{{lh|calc(100%+2px)}}};
+	|9=flexelement items_9
- 	padding: 4px;
+	|10%=flexelement items_10
-	{{#if: {{{8|}}} | padding-bottom: 0px; }}
+	}}
-">[[Datei:{{{7|}}} | {{{w|100px}}}]]{{#if:{{{8|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{8|}}} }}</span>|}}</span>|&#8291;}}{{#if: {{{9|}}}
+}}{{#vardefine: class-width_i5 | {{#switch: {{{i5|{{{i|{{{w|3}}} }}} }}}
-	| {{!}}{{!}} style="padding: 0px; vertical-align: top;" {{!}}<span style="
+	|1=flexelement items_1
-	display: inline-block;
+	|2=flexelement items_2
-	border: 1px solid #dddddd;
+	|3=flexelement items_3
-	border-radius: 4px;
+	|4=flexelement items_4
-	width:calc({{{w|100px}}}+2);
+	|5=flexelement items_5
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|6=flexelement items_6
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|7=flexelement items_7
-	margin-left:{{{ml|3px}}};
+	|8=flexelement items_8
-	line-height: {{{lh|calc(100%+2px)}}};
+	|9=flexelement items_9
- 	padding: 4px;
+	|10%=flexelement items_10
-	{{#if: {{{10|}}} | padding-bottom: 0px; }}
+	}}
-">[[Datei:{{{9|}}} | {{{w|100px}}}]]{{#if:{{{10|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{10|}}} }}</span>|}}</span>|&#8291;}}{{#if: {{{11|}}}
+}}{{#vardefine: class-width_i6 | {{#switch: {{{i6|{{{i|{{{w|3}}} }}} }}}
-	| {{!}}{{!}} style="padding: 0px; vertical-align: top;" {{!}}<span style="
+	|1=flexelement items_1
-	display: inline-block;
+	|2=flexelement items_2
-	border: 1px solid #dddddd;
+	|3=flexelement items_3
-	border-radius: 4px;
+	|4=flexelement items_4
-	width:calc({{{w|100px}}}+2);
+	|5=flexelement items_5
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|6=flexelement items_6
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|7=flexelement items_7
-	margin-left:{{{ml|3px}}};
+	|8=flexelement items_8
-	line-height: {{{lh|calc(100%+2px)}}};
+	|9=flexelement items_9
- 	padding: 4px;
+	|10%=flexelement items_10
-	{{#if: {{{12|}}} | padding-bottom: 0px; }}
+	}}
-">[[Datei:{{{11|}}} | {{{w|100px}}}]]{{#if:{{{12|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{12|}}} }}</span>|}}</span>|&#8291;}}{{#if: {{{13|}}}
+}}{{#vardefine: class-width_i7 | {{#switch: {{{i7|{{{i|{{{w|3}}} }}} }}}
-	| {{!}}{{!}} style="padding: 0px; vertical-align: top;" {{!}}<span style="
+	|1=flexelement items_1
-	display: inline-block;
+	|2=flexelement items_2
-	border: 1px solid #dddddd;
+	|3=flexelement items_3
-	border-radius: 4px;
+	|4=flexelement items_4
-	width:calc({{{w|100px}}}+2);
+	|5=flexelement items_5
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|6=flexelement items_6
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|7=flexelement items_7
-	margin-left:{{{ml|3px}}};
+	|8=flexelement items_8
-	line-height: {{{lh|calc(100%+2px)}}};
+	|9=flexelement items_9
- 	padding: 4px;
+	|10%=flexelement items_10
-	{{#if: {{{14|}}} | padding-bottom: 0px; }}
+	}}
-">[[Datei:{{{13|}}} | {{{w|100px}}}]]{{#if:{{{14|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{14|}}} }}</span>|}}</span>|&#8291;}}{{#if: {{{15|}}}
+}}{{#vardefine: class-width_i8 | {{#switch: {{{i8|{{{i|{{{w|3}}} }}} }}}
-	| {{!}}{{!}} style="padding: 0px; vertical-align: top;" {{!}}<span style="
+	|1=flexelement items_1
-	display: inline-block;
+	|2=flexelement items_2
-	border: 1px solid #dddddd;
+	|3=flexelement items_3
-	border-radius: 4px;
+	|4=flexelement items_4
-	width:calc({{{w|100px}}}+2);
+	|5=flexelement items_5
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|6=flexelement items_6
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|7=flexelement items_7
-	margin-left:{{{ml|3px}}};
+	|8=flexelement items_8
-	line-height: {{{lh|calc(100%+2px)}}};
+	|9=flexelement items_9
- 	padding: 4px;
+	|10%=flexelement items_10
-	{{#if: {{{16|}}} | padding-bottom: 0px; }}
+	}}
-">[[Datei:{{{15|}}} | {{{w|100px}}}]]{{#if:{{{16|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{16|}}} }}</span>|}}</span>|&#8291;}}{{#if: {{{17|}}}
+}}{{#vardefine: class-width_i9 | {{#switch: {{{i9|{{{i|{{{w|3}}} }}} }}}
-	| {{!}}{{!}} style="padding: 0px; vertical-align: top;" {{!}}<span style="
+	|1=flexelement items_1
-	display: inline-block;
+	|2=flexelement items_2
-	border: 1px solid #dddddd;
+	|3=flexelement items_3
-	border-radius: 4px;
+	|4=flexelement items_4
-	width:calc({{{w|100px}}}+2);
+	|5=flexelement items_5
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|6=flexelement items_6
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|7=flexelement items_7
-	margin-left:{{{ml|3px}}};
+	|8=flexelement items_8
-	line-height: {{{lh|calc(100%+2px)}}};
+	|9=flexelement items_9
- 	padding: 4px;
+	|10%=flexelement items_10
-	{{#if: {{{18|}}} | padding-bottom: 0px; }}
+	}}
-">[[Datei:{{{17|}}} | {{{w|100px}}}]]{{#if:{{{18|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{18|}}} }}</span>|}}</span>|&#8291;}}{{#if: {{{19|}}}
+}}{{#vardefine: class-width_i10 | {{#switch: {{{i10|{{{i|{{{w|3}}} }}} }}}
-	| {{!}}{{!}} style="padding: 0px; vertical-align: top;" {{!}}<span style="
+	|1=flexelement items_1
-	display: inline-block;
+	|2=flexelement items_2
-	border: 1px solid #dddddd;
+	|3=flexelement items_3
-	border-radius: 4px;
+	|4=flexelement items_4
-	width:calc({{{w|100px}}}+2);
+	|5=flexelement items_5
-	color:{{Farbe|{{{c|{{{fc|#333333;}}} }}} }}
+	|6=flexelement items_6
-	font-size: {{{fs|{{{s|1em}}} }}};
+	|7=flexelement items_7
-	margin-left:{{{ml|3px}}};
+	|8=flexelement items_8
-	line-height: {{{lh|calc(100%+2px)}}};
+	|9=flexelement items_9
- 	padding: 4px;
+	|10%=flexelement items_10
-	{{#if: {{{20|}}} | padding-bottom: 0px; }}
+	}}
-">[[Datei:{{{19|}}} | {{{w|100px}}}]]{{#if:{{{20|}}} |<br><span style="display:inline-block; width: {{{w|100px}}};">{{#if:|| {{{20|}}} }}</span>|}}</span>|&#8291;}}
+}}{{#vardefine: class-width_i11 | {{#switch: {{{i11|{{{i|{{{w|3}}} }}} }}}
-</tr></table><noinclude>
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i12 | {{#switch: {{{i12|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i13 | {{#switch: {{{i13|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i14 | {{#switch: {{{i14|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i14 | {{#switch: {{{i14|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i15 | {{#switch: {{{i15|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i16 | {{#switch: {{{i16|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i17 | {{#switch: {{{i17|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i18 | {{#switch: {{{i18|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i19 | {{#switch: {{{i19|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#vardefine: class-width_i20 | {{#switch: {{{i209|{{{i|{{{w|3}}} }}} }}}
+	|1=flexelement items_1
+	|2=flexelement items_2
+	|3=flexelement items_3
+	|4=flexelement items_4
+	|5=flexelement items_5
+	|6=flexelement items_6
+	|7=flexelement items_7
+	|8=flexelement items_8
+	|9=flexelement items_9
+	|10%=flexelement items_10
+	}}
+}}{{#if: {{{einblenden | {{{einklappen|}}} }}} |
+	<div class="mw-collapsible {{#ifeq: {{{collapsed|false}}}|true | mw-collapsed}} {{#ifeq: {{{layout|{{{dezent|}}} }}} |dezent|dezent}}"
+	data-expandtext="{{{einblenden|{{{ausklappen|ausklappen}}} }}}"
+	data-collapsetext="{{{ausblenden | {{{einklappen|einklappen}}} }}}"
+	id="mw-customcollapsible-Gallery"
+	><div class="mw-collapsible-content">
+}}<div class="flexbox"><div class="{{#var: class-width_i1}}" {{#if:{{{1|}}}||style="border: 1px solid white; background: white; text-align:left;"}}>{{#if:{{{1|}}} | [[Datei:{{{1|}}}|mini|hochkant=2|{{{2|1}}}]] | {{{2|}}} }}</div>
+{{#if: {{{3|}}} | <div class="{{#var: class-width_i2}}">[[Datei:{{{3|}}}|mini|hochkant=2|{{{4|2}}}]]</div>}}
+{{#if: {{{5|}}} | <div class="{{#var: class-width_i3}}">[[Datei:{{{5|}}}|mini|hochkant=2|{{{6|3}}}]]</div>}}
+{{#if: {{{7|}}} | <div class="{{#var: class-width_i4}}">[[Datei:{{{7|}}}|mini|hochkant=2|{{{8|4}}}]]</div>}}
+{{#if: {{{9|}}} | <div class="{{#var: class-width_i5}}">[[Datei:{{{9|}}}|mini|hochkant=2|{{{10|5}}}]]</div>}}
+{{#if: {{{11|}}} | <div class="{{#var: class-width_i6}}">[[Datei:{{{11|}}}|mini|hochkant=2|{{{12|6}}}]]</div>}}
+{{#if: {{{13|}}} | <div class="{{#var: class-width_i7}}">[[Datei:{{{13|}}}|mini|hochkant=2|{{{14|7}}}]]</div>}}
+{{#if: {{{15|}}} | <div class="{{#var: class-width_i8}}">[[Datei:{{{15|}}}|mini|hochkant=2|{{{16|}}}]]</div>}}
+{{#if: {{{17|}}} | <div class="{{#var: class-width_i9}}">[[Datei:{{{17|}}}|mini|hochkant=2|{{{18|}}}]]</div>}}
+{{#if: {{{19|}}} | <div class="{{#var: class-width_i10}}">[[Datei:{{{19|}}}|mini|hochkant=2|{{{20|}}}]]</div>}}
+{{#if: {{{21|}}} | <div class="{{#var: class-width_i11}}">[[Datei:{{{21|}}}|mini|hochkant=2|{{{22|}}}]]</div>}}
+{{#if: {{{23|}}} | <div class="{{#var: class-width_i12}}">[[Datei:{{{23|}}}|mini|hochkant=2|{{{24|}}}]]</div>}}
+{{#if: {{{25|}}} | <div class="{{#var: class-width_i13}}">[[Datei:{{{25|}}}|mini|hochkant=2|{{{26|}}}]]</div>}}
+{{#if: {{{27|}}} | <div class="{{#var: class-width_i14}}">[[Datei:{{{27|}}}|mini|hochkant=2|{{{28|}}}]]</div>}}
+{{#if: {{{29|}}} | <div class="{{#var: class-width_i15}}">[[Datei:{{{29|}}}|mini|hochkant=2|{{{30|}}}]]</div>}}
+{{#if: {{{31|}}} | <div class="{{#var: class-width_i16}}">[[Datei:{{{31|}}}|mini|hochkant=2|{{{32|}}}]]</div>}}
+{{#if: {{{33|}}} | <div class="{{#var: class-width_i17}}">[[Datei:{{{33|}}}|mini|hochkant=2|{{{34|}}}]]</div>}}
+{{#if: {{{35|}}} | <div class="{{#var: class-width_i18}}">[[Datei:{{{35|}}}|mini|hochkant=2|{{{36|}}}]]</div>}}
+{{#if: {{{37|}}} | <div class="{{#var: class-width_i19}}">[[Datei:{{{37|}}}|mini|hochkant=2|{{{38|}}}]]</div>}}
+{{#if: {{{39|}}} | <div class="{{#var: class-width_i20}}">[[Datei:{{{39|}}}|mini|hochkant=2|{{{40|}}}]]</div>}}
+</div>
+{{#if: {{{einklappen}}} |</div></div>}}
+<noinclude>
 {{Dokumentation}}
 </noinclude>