Fügen Sie den WOW Slider zu Ihrer Webseite hinzu

1. Erstellen Sie die Webseite, in der Sie den Slider verwenden wollen

Ihre Webseite kann bis auf den Slider fertiggestellt sein, Sie können aber auch gerade erst mit der Entwicklung begonnen haben. Bevor Sie den Slider zu Ihrer Webseite hinzufügen können, sollten Sie zunächst sicherstellen, dass Ihre divs vorbereitet sind. Dies ist auch deshalb notwendig, damit Sie ein div bereit haben, zu dem Sie Ihre Slideshow hinzufügen können

2. Erstellen Sie Ihre Slideshow

Öffnen Sie WOWSlider. WOWSlider ist kostenlos, doch die kostenlose Version enthält Logos und Werbung. Das ist OK, wenn Sie sich noch in der Übung befinden oder die Slideshow testen, um herauszufinden, wie sie aussieht. Wenn Ihnen diese Art von Slider jedoch gefällt, dann sollten Sie die Pro-Version kaufen, um die Werbung zu entfernen.

Öffnen Sie den Ordner Ihrer Website. Idealerweise sollten sich einige Bilder in einem Ordner Ihrer Seite für die Slideshow bereit liegen. Die Größe dieser Bilder sollte in Photoshop angepasst werden, sodass Sie das perfekte Maß für die Slideshow haben. Idealerweise sollte jedes Bild dieselbe Größe besitzen und keines sollte größer als 100k sein. Sie könnten zum Beispiel jedes Bild auf eine Größe von 960 x 300 Pixeln bringen.

Markieren Sie die Bilder im Website-Ordner und ziehen Sie sie in WOWSlider. Jedes Bild erhält einen Slide. Vielleicht wollen Sie außerdem einige Fotos aus Foto-Hosting-Diensten hinzufügen. WOWSlider unterstützt Flickr, Photobucket und Picasa. Lassen Sie uns nun ein paar Fotos aus Flickr hinzufügen.

Add images to jQuery Slider

Klicken Sie hierzu auf den ‚Bilder und Videos hinzufügen‘-Knopf oben im Anwendungsfenster und klicken Sie dann auf ‚Bilder aus Flickr hinzufügen‘.

Add images from Flickr to jQuery Slider
Add images from Flickr to Slider jQuery

Sie werden sehen, dass Sie einen freien Bereich in jedem Slide haben, in den Sie Details eintragen können. Zum Beispiel können Sie einen Titel hinzufügen. Das Adressen-Feld ist eine Verknüpfung, wenn Sie dieses also ausfüllen, wird ein Besucher, der darauf klickt, zu der Adresse geleitet. Wenn Sie den Slide nicht klickbar machen wollen, müssen Sie nichts in dieses Feld eintragen.

Set the url for every slide of jQuery slideshow

Die Titel- und Beschreibungsfelder sorgen für die Beschriftung. Wenn Sie also beispielsweise eine Reise-Website mit Bildern von Urlaubszielen betreiben, könnten Sie hier den Titel Andamanensee und die Beschreibung Thailand eintragen, um die entsprechende Beschriftung zu erzeugen.

Ihr Ziel sollten in sich schlüssige Titel und Beschreibungen über alle Slides hinweg sein.

Oben in der Navigationsleiste sehen Sie eine Option zum Hinzufügen und Löschen von Bildern sowie gebogene Pfeile, mit denen Sie die Bilder drehen können.

Rotate the images in jQuery slideshow

Es ist außerdem möglich, den aktuell bearbeiteten Slider zu speichern, indem Sie auf den Speichern-Knopf klicken (ähnelt einer Diskette).

Save the jQuery slideshow slider

3. Legen Sie die Eigenschaften fest

Im nächsten Schritt legen Sie die Eigenschaften Ihrer Slideshow fest. Dazu klicken Sie auf den Eigenschaften-Knopf (ähnelt einem Schraubenschlüssel).

Geben Sie Ihrer Slideshow einen Titel, zum Beispiel Website Slideshow.

Set the properties of jQuery slideshow

Sie werden viele verschiedene Optionen für Ihre Slideshow vorfinden. Sie können entscheiden, ob Sie Autoplay aktivieren wollen, ob sie beim Darüberfahren mit der Maus pausieren soll, ob sie eine Bullet-Navigation – dies erzeugt kleine Punkt, die Besucher benutzen können, um durch die Slideshow zu navigieren – oder eine Filmstreifen-Navigation besitzen soll.

Lassen Sie für dieses Tutorial alles auf den Standardeinstellungen, die Bullet-Navigation. Klicken Sie auf den ‚Bilder‘-Tab und wählen Sie das Terse-Thema. Falls die von Ihnen hinzugefügten Bilder eine Größe von 960 x 360 besitzen, können Sie die 960 x 300-Einstellung für die Größe der Slideshow verwenden. Wählen Sie andernfalls die passende Größe. Stellen Sie sicher, dass die Option zum Bewahren des richtigen Seitenverhältnisses ausgewählt ist, denn die Bilder haben alle die korrekte Größe.

Select the transition and skin for the jQuery Slider

Wählen Sie einen Übergangseffekt, zum Beispiel Blur.

4. Veröffentlichen Sie den Slider

Wenn Sie auf den ‚Veröffentlichen‘-Tab klicken, sehen Sie einige Optionen, aus denen Sie wählen können. Sie können den Slider in einen Ordner veröffentlichen, ihn auf einen Server hochladen oder in eine Seite einfügen. Wir werden die ‚In Seite einfügen‘-Option verwenden. Wählen Sie die Option und klicken Sie auf den Durchsuchen-Knopf.

Insert the slider jQuery code to the HTML page

Wechseln Sie zu der Seite, auf der der Slider erscheinen soll. Klicken Sie dann auf ‚Veröffentlichen‘. Es wird sich in WOWSlider öffnen und es Ihnen ermöglichen, genau auszuwählen, wo der Code eingefügt werden soll.

Finden Sie das korrekte div für Ihre Slideshow und klicken Sie hinein. Prüfen Sie den HTML-Code in der Seitenleiste, um sicherzustellen, dass er genau dort eingefügt wird, wo Sie es wünschen.

Klicken Sie auf den ‚Davor einfügen‘-Knopf. Dies wird Ihnen eine Vorschau zeigen, wo die Slideshow sich befindet, aber machen Sie sich keine Sorgen, wenn es an dieser Stelle etwas seltsam aussieht.

Insert using the wizard the slideshow jQuery code to the HTML

Klicken Sie auf ‚Speichern‘ und die Seite öffnet sich in Ihrem Browser. Sie werden sehen, dass der Slider zu Ihrer Seite hinzugefügt wurde. Der Titel und die Beschriftung werden angezeigt, Sie können sich testhalber durch die Bullet-Navigation klicken und so weiter.

Your jQuery Slider is ready - Awesome!

Falls Sie Schwierigkeiten haben, können Sie Ihre HTML-Seite öffnen und den Slideshow-Code löschen. Dies ist einfach möglich, indem Sie alles zwischen den Start- und End-Tags von WOWSlider wählen und entfernen. Dann können Sie zurück zu Ihrer Slideshow kehren, die Änderungen vornehmen und alles noch einmal auf demselben Wege veröffentlichen. Sie müssen nur daran denken, den Code jedes Mal zu löschen, wenn Sie Änderungen vornehmen wollen.