Presentation responsive

Freeware, © Gerhard Schacherl, 2020

Features

Slideshow

DEMO Slideshow: Minimundus

Noten umblättern

DEMO Noten: Romanze, Sor

Bedienung

Tastenbedienung

Nächstes Bild: Cursor rechts
Voriges Bild: Cursor links
Erstes Bild: Taste 'Pos1'
Letztes Bild: Taste 'Ende'
Bestimmte Bildnummer wählen: Taste 'N'
Mausbedienung umschalten (s.unten): Alt + M
     Firefox: Alt + Shift + M

Mausbedienung (Touch)

Maustaste rechts

Maustaste rechts (od. bei Touch länger berühren): Nächstes Bild

Maustaste links - Variante 1

für Touchsceens besser - am Beginn aktiv
Maustaste links (Touch) in der rechten Fensterhälfte: Nächstes Bild
Maustaste links (Touch) in der linken Fensterhälfte: Voriges Bild

Maustaste links - Variante 2

für Mausbedienung besser geeignet
(Umschalten der Mausbedienung: Das Icon in der Ecke links unten klicken!
Das Icon ändert sich zu )

Maustaste links (Touch) im ganzen Fenster: Voriges Bild

Download

presentation_responsive.zip

Enthält das Beispielprojekt "Minimundus", dieses kann für eigene Präsentationen adaptiert werden.

Beispielscript

In der Demodatei 'minimundus.html' befindet sich folgendes Script:

<script>

var bilder = ["","minimundus/",
"","Minimundus<br><br>Klagenfurt",
"DSCN0791.JPG","Freiheitsstatue, New York, USA",
"DSCN0793.JPG","Sagrada Familia, Barcelona, Spanien",
"DSCN0804.JPG", "Alte Talstation Pöstlingbergbahn, Linz, Österreich",
"DSCN0812.JPG", "Bahnhof, Bad Ischl, Österreich",
"DSCN0818.JPG", "Basilius-Kathedrale, Moskau, Russland",
"DSCN0836.JPG", "Big Ben, London, England",
"DSCN0865.JPG", "Tadsch Mahal, Agra, Indien",
"DSCN0886.JPG", "Eiffelturm, Paris, Frankreich",
];

</script>

Die Variable 'bilder' muss für eigene Projekte beibehalten werden.
'minimundus' ist das Verzeichnis, in dem die Bilder gespeichert sind.
Es folgen jeweils Bilddateiname und Beschreibung.
Ist der Bilddateiname leer, verwendet das Programm die Beschreibung als Überschrift.

Damit sollten eigene Projekte leicht möglich sein:
Datei 'minimundus.html' kopieren und passend benennen,
eigenes Script einfügen, fertig!

Den Rest erledigen das beigefügte Script 'bildwechsel.js' und die im Ordner 'data' befindliche Style-Datei 'style.css'.