Einfache und überzeugende JavaScript-Bildeffekte mit jQuery-Plugins

4
(4)
Beitrag bewerten
Stand: 12. März 2010

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

Mitglied werden

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen.

Sind Sie sich noch unsicher? Dann wählen Sie die Option “akademie.de kostenlos testen”. So können Sie sich 14 Tage in Ruhe umschauen. Downloads stehen Ihnen in dieser Zeit nicht zur Verfügung. Gefällt Ihnen akademie.de nicht, reicht ein formloser Widerruf per E-Mail innerhalb der ersten 14 Tage. Es entstehen für Sie keine Kosten. Widerrufen Sie nicht, erhalten Sie nach Ablauf von 14 Tagen vollen Zugriff und der Mitgliedsbeitrag wird abgebucht.

Ich bin bereits Mitglied
Mitglied werden!
Ich entscheide mich für folgende Zahlungsweise:

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