Einfache und überzeugende JavaScript-Bildeffekte mit jQuery-Plugins

Vorschaubilder mit dem Lightbox-Effekt vergrößern

Als nächstes Beispiel sehen Sie, wie Sie Vorschaubilder über den Lightbox-Effekt vergrößern: Klickt der Benutzer auf ein Bild, wird das Bild langsam vergrößert und die restliche Webseite leicht abgedunkelt.

Bilder lassen sich effektvoll über das Lightbox-Plugin vergrößern.

Wahlweise können Sie den Lightbox-Effekt am "bewegten" BeispielAnzeigen ansehen.

Das Einbauen der Lightbox geht ganz ähnlich wie beim Cycle-Plugin. Allerdings müssen Sie einige vorgefertigte Dateien mehr einbinden - neben den JavaScript-Dateien brauchen Sie auch eine CSS-Datei und außerdem einen Unterordner mit den Navigationsbuttons.

Um das Lightbox-Plugin auszuprobieren, benötigen Sie Ihre Bilder in zwei Größen: als kleine Vorschaubilder und als größere Bilder.

  • HTML-Basis

  • Lightbox-Dateien einbinden

  • Lightbox starten

  • Lightbox anpassen

  • Buttons ändern

  • Lightbox-Beispiel

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

Inhalt

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren