Mit einem <iframe>-Element kann man eine Sozi-Präsentation mit wenigen Zeilen in eine Web-Seite einbauen:
<iframe src="my-presentation.sozi.html">
Meine Sozi-Präsentation sollte hier ablaufen.
</iframe>
Breite und Höhe des Ansichtsbereichs können entweder als Attribute des <iframe>-Elements eingestellt werden
oder mittels CSS. Ein Beispiel finden Sie nachstehend.
Lesen Sie mehr über <iframe> Elemente.
Der Präsentation den Tastatur-Focus übergeben
Beim Laden einer HTML-Seite übergibt der Browser den Tastatur-Focus an das erste Element, das
ihn sich greifen kann (Hyperlink, Formularfeld etc.).
Aus diesem Grund reagiert eine eingebettete Präsentation direkt nach dem Laden eventuell nicht sofort
auf Tastatureingaben. Durch Drücken der TAB-Taste kann der Focus an das jeweils nächste Element weitergegeben
werden.
Man kann diese Aufgabe auch einem Script übergeben. Angenommen, das <iframe>-Element mit Ihrer Präsentation ist
das erste <iframe>-Element auf Ihrer Seite, dann können Sie ihm mit dem folgenden Script den Focus automatisch
übergeben.
<script>
window.addEventListener("load", function () {
document.querySelector("iframe").focus();
}, false);
</script>
Steuern Sie die Präsentation von der HTML-Seite aus
Im folgenden Beispiel werden der HTML-Seite zwei Buttons hinzugefügt, mit denen die Präsentation
jeweils ein Bild vor oder zurück gestellt werden kann.
Zwischen den beiden Buttons erscheint in einem <span>-Element sogar der Titel des gerade angezeigten
Frames.
Klicken Sie die Buttons, um das nächste /letzte Bild anzuzeigen:
<input id="btn-prev" type="button" value="←" title="Zum nächsten Bild">
<span id="frame-title">Loading…</span>
<input id="btn-next" type="button" value="→" title="Ein Bild zurück">
<iframe src="my-presentation.sozi.html">
Meine Sozi-Präsentation sollte hier ablaufen.
</iframe>
<script>
window.addEventListener("load", function () {
var frame = document.querySelector("iframe");
var btnPrev = document.getElementById("btn-prev");
var btnNext = document.getElementById("btn-next");
var spanTitle = document.getElementById("frame-title");
var player = frame.contentWindow.sozi.player;
spanTitle.innerHTML = player.currentFrame.title;
btnPrev.addEventListener("click", function () {
player.moveToPrevious();
}, false);
btnNext.addEventListener("click", function () {
player.moveToNext();
}, false);
player.addListener("frameChange", function () {
spanTitle.innerHTML = player.currentFrame.title;
});
}, false);
</script>
Hier das Ergebnis:
Klicken Sie die Buttons, um das nächste /letzte Bild anzuzeigen:
Loading…