Sie sind hier: Startseite » HTML-Editor » HTML5 Slideshow

HTML5 Slideshow*

HTML-Editor Hilfe

HTML-Editor Hilfe

Sind Sie ratlos?

Mit diesem Zusatz-Tool kann man sich blicken lassen!
Erstellen Sie eine Slideshow innerhalb des HTML-Editors.
Die Übergänge zwischen den Bildern werden mit dem bekannten "Ken Burns-Effekt" erzeugt und sind eine echte Augenweide!

Zeigen Sie Ihren Seitenbesuchern, wie man eine Webseite ausstatten kann!


HTML5 Slideshow*

HTML5 Slideshow*

Mit eingefügten Bildern!

So oder so ähnlich erscheint die HTML5-Slideshow* beim ersten Offnen.
Sie erkennen sicher sofort die Ähnlichkeit zum Nivo Slider*, den wir schon im entsprechenden Kapitel ausführlich behandelt hatten.

Oben sehen wir wieder die Möglichkeiten des Bildimportes:

Der Button "Links" öffnet das Fenster der "Image Gallery*".
(Insofern Sie diese Erweiterung in Ihrem HTML-Editor wünschen!)
Auf dieses Zusatz-Tool gehen wir aber noch ein.

Der "Mittlere" Button öffnet den "File Manager*" , den wir Ihnen schon in einem vorangegangenen Kapitel vorgestellt haben.

Der "Rechte" Button öffnet ein Fenster, in dem Sie Bilder auf Ihrem Rechner zur Verwendung im Nivo Slider* auswählen können.

.: Achten Sie hier schon darauf, dass alle ausgewählten Bilder das gleiche Format haben!

.: Immer Querformat oder immer Hochformat!

.: Immer die gleiche Größe!

.: Noch ein Tip von uns:
Für die Slideshow sollten Sie Bilder benutzen, die etwa ein Drittel größer sind als die Slideshow dann werden soll.
Wenn bei der Slideshow der "Ken Burns Effekt" gewählt ist, wird auch in das Bild hinein gezoomt.
Bei Bildern, die genau so groß sind wie die Einstellungen unter "Settings", kommt es dann zu unscharfer Darstellung.

Wenn Sie das nicht beachten, werden Sie kein gutes Ergebnis erzielen!

Wir setzen im weiteren Verlauf voraus, dass Sie den File Manager* in Ihrem HTML-Editor integriert haben!

Der rote Button löscht das jeweilige Bild aus Ihrer Auswahl!

Der grüne Button lässt weitere Einstellungen zu.
Das schauen wir uns jetzt einmal genauer an:

Grüner Button geklickt!

Erstes Bild gewählt!

Der Reiter "Allgemein" ist beim Klicken des grünen Buttons vorbelegt.
In der ersten Zeile sehen wir "Typ" und "Ziel". Wofür das denn?

.: "Typ" lässt Sie auswählen, in welcher Form sich ein Klick auf das jeweilige Bild in der fertigen Fassung auswirkt!

Nehmen wir z.B. an, Sie wollen einen Link unter ein Bild legen, der auf eine andere Webseite zeigt.

Unter "Url:" geben Sie die entsprechende Web-Adresse ein und unter "Ziel" wählen Sie, wie sich dieser Link dann öffnet.

Die Position "Ziel" beinhaltet folgende Punkte:
(default) = öffnet browserabhängig in der Regel in einem neuen Browserfenster.
Für die weiteren Positionen folgen Sie bitte diesem Link zur Seite SELFHTML.
Hier können Sie auch weiterführende Beispiele sehen.

Unter "Titel" können Sie beim sog. Mouseover einen Tooltip** eintragen und erzeugen.
Unter "Description" können Sie noch eine Beschreibung zum Bild eingeben.
Diese beiden Positionen werden beim "Überfahren" mit der Maus ins jeweilige Bild eingeblendet.

** Verweis: Lesen Sie hierzu auch unter unserem Kapitel "Tooltip", unter "Kleine Zutaten"

Google Analystics!

Sollten Sie ein Konto bei Google Analytics eingerichtet haben um Ihre Werbemaßnahmen oder Teilbewerbungen von einzelnen Produkten zu erfassen, könnten Sie hier auch die Klicks auf die einzelnen Bilder dokumentieren.

Unter dem Reiter "Lightbox" können Sie z.B. ein größeres Bild des gerade angeklickten Bildes öffnen.
(Insofern Sie ein entsprechendes Bild zur Verfügung gestellt haben.)

Die weiteren Einstellmöglichkeiten!

In den Bildern (die man zum vergrößern anklicken kann) sehen Sie die weiteren Einstellpositionen!

.: Settings
- Slideshow size
: Hier wird die Größe in px (Pixel) der Slideshow eingestellt.
Da man hier freie Einstellungen tätigen kann, müssen Sie auf das richtige Format achten.
Üblich ist das 4 x 3 Format (Quer).
Das bedeutet in einem Beispiel wie unsere Slideshow oben - Breite: 200px Höhe 100 px -.

- Autoplay slideshow
: Ist diese Position geklickt, beginnt die Slideshow von selbst.
- Random start slide: Ein zufälliges Startbild.
- Shuffle the slides: Die Slideshow läuft mit zufälliger Bildfolge.

.: Slides

- Image placement:
Hier lassen sich auch Bilder anpassen, die evtl. kleiner oder wesentlich
größer als unter "Settings" eingestellt sind. Wir empfehlen aber in diesem Fall, besser extern
die Bilder etwa ein Drittel größer als die Slideshow selbst zu erstellen und diese Einstellung
auf "Center" zu lassen.

- Transition effect: Lässt Ihnen die Wahl, in welcher Form der Übergang zwischen den Bildern
funktionieren soll. Das ist Geschmacksache. Probieren Sie am besten selbst.

- Transition easing: Derzeit keine weitere Einstellmöglichkeit.
- Time slide visible: Dauer der Einblendung des einzelnen Bildes.
- Transition duration: Ist die Dauer des Übergangseffektes.

.: Titles
Wie weiter oben unter den grünen Pfeilen bei den Bildern beschrieben, können Sie jedem
Bild einen Titel und eine Beschreibung zuordnen. Wie und wo diese Einblendungen
stattfinden sollen, können Sie hier einstellen.

- Title position: Auswahl oben oder unten.

- When is the title visible: Hier können Sie auswählen, wie die Titeleinblendung
stattfinden soll.

- Title transition effect:
Auswahl, wie der Titel beim Bildübergang aussehen soll.

- Title transition duration:
Hier die Übergangsdauer des Titels einstellen.

- Title transition easing:
Derzeit keine weitere Einstellmöglichkeit.

.: Navigation
Innerhalb der Slideshow besteht die Möglichkeit, eine Navigation zum Auswählen
der einzelnen Bilder zu integrieren.
Das kann mittels fester Einblendung oder bei einem Mouseover
"Show controls on hover" erfolgen. Probieren Sie einfach mal selbst,
was Ihnen gefällt.

.: Ken Burns

- Use the Ken Burns effect:
Hier legen Sie fest, ob der Effekt genutzt wird!

- Start position / End position:
Legen Sie hier fest, an welcher Stelle der
Bewegungseffekt beginnen bzw. enden soll.

- Start / End zoom factor:
Der Ken Burns Effekt zeigt eine Bewegung in das Bild
hinein und heraus. In welchem Verhältnis das stattfindet, legen Sie hier fest.

Wie funktioniert das?
Schreibweise im Beispiel: 1~1.5
Die erste Zahl steht für den Zoomfaktor der Beginnposition.
Die zweite Zahl demzufolge für die Endposition.

Sehen wir uns die Sache anhand der ersten Zahl an:
die Zahl "1" bedeutet = kein Zoomfaktor.
Sie können nun die Zahl vergrößern und verkleinern.
Übertreiben Sie es hier aber nicht.
Beim Verkleinern die Schreibweise z.B. "0.8" verwenden.
Beim Vergrößern sinngemäß z.B. "1.2" verwenden.
-> Unbedingt auf den "." (Punkt) in der Schreibweise achten.

Wir empfehlen Ihnen alles einmal zu testen.
Das bringt einem die Sache näher.

.: Bei unserem Beispiel ganz oben haben wir, außer an der Größe unter "Settings",
die Einstellungen nicht verändert.

Das HTML5 Slideshow* Tool wird (optional) gegen Aufpreis in Ihren HTML-Editor eingebaut.