Slideshow

Beispiel 5. Slideshows einbinden

<bildgruppe autoplay="nein" breite="360" hoehe="240" wiederholung="nein">
	<script quelle="lib_jquery-2.1.0.min.js" />
	<script quelle="lib_jquery.touchSwipe.min.js" />
	<script quelle="slideshow.js" />
	<css quelle="slideshow_stylesheet.css" />
	<abbildung>
		<abb breite="360" hoehe="240" quelle="bild1.jpg"/>
		<legende>
			<abs>Hier steht die Legende von Bild 1.</abs>
		</legende>
	</abbildung>
	<abbildung>
		<abb breite="360" hoehe="240" quelle="bild2.jpg"/>
		<legende>
			<abs>Hier steht die Legende von Bild 2.</abs>
		</legende>
	</abbildung>
	<abbildung>
		<abb breite="360" hoehe="240" quelle="bild3.jpg"/>
		<legende>
			<abs>Hier steht die Legende von Bild 3.</abs>
		</legende>
	</abbildung>
	<legende>
		<abs>Hier steht die Legende der gesamten Slideshow.</abs>
	</legende>
</bildgruppe>

CSS Dateien oder JavaScript können über das jeweilige Element aufgerufen (<css>, <script>) werden. Damit eine Slideshow funktioniert, muss immer mindestens ein externes JavaScript referenziert werden. In der Beispiel-Slideshow werden 3 JavaScript und 1 externe CSS benötigt.

Da Bilder auf jedem Reader dargestellt werden können, kann kein Fallbackinhalt bei Slideshows definiert werden. So wird bei Readern mit JavaScript-Unterstützung die Slideshow gezeigt, bei Readern ohne JavaScript, werden die einzelnen Bilder untereinander dargestellt.

Die Reihenfolge der JavaScript-Dateien ist aufgrund der Abhängigkeit untereinander wichtig und sollte so (für die Beispiel Slideshow) übernommen werden.