Einfache und überzeugende JavaScript-Bildeffekte mit jQuery-Plugins

Bilder mit JavaScript effektvoll präsentieren

Sie brauchen kein Flash, um Bilder auf Ihren Webseiten effektvoll in Galerien und andere Arten zu präsentieren - JavaScript reicht vollkommen. Sie müssen die Funktionen und Effekte auch nicht etwa selbst programmieren: Die JavaScript-Bibliothek jQuery liefert Ihnen zusammen mit speziellen Plugins alles, was Sie brauchen - und das kostenlos! Sie müssen nur ein paar Code-Zeilen für die gewünschten Einstellungen vornehmen und die fertigen JavaScript-Dateien auf Ihren Server laden. Wir zeigen Ihnen, wie Sie mit jQuery bzw. JavaScript schnell zu schicken Darstellungsfunktionen für Ihre Grafiken kommen.

Auf dieser Seite

∅ 4 / 4 Bewertungen

Sie suchen eine effektvolle Methode, um Ihre Bilder im Web zu präsentieren?

Die JavaScript-Bibliothek jQuery bietet zusammen mit speziellen Plugins die Möglichkeit, den Besuchern Ihrer Website mit einfachen Mitteln auf sehr ansprechende Weise Grafik-Galerien zu zeigen, etwa als Dia-Show oder als "Thumbnail"-Galerien zum Groß-Klicken.

jQuery-Plugins funktionieren ohne Flash, nur mit JavaScript.

Vorteile von jQuery

  • Sowohl jQuery selbst als auch die verschiedenen Plugins sind einfache JavaScript-Dateien. Sie benötigen keine großen JavaScript-Kenntnisse, grundlegende Kenntnisse in HTML und CSS reichen aus. Sie müssen nicht komplexen JavaScript-Code programmieren, sondern nur ein paar Zeilen Code ergänzen. Damit steht die Grundfunktion, die Sie ganz nach Ihren Bedürfnissen weiter anpassen können.

  • jQuery sowie die verschiedenen Plugins, die wir Ihnen vorstellen, können Sie auf Ihren Webseiten kostenlos nutzen.

Beispiele für jQuery-Plugins

Galleria-Demo

64860_64786_galleria_demo_website.jpg

  • Das "Plugin "Cycle" liefert eine effektvolle Diashow, bei der Sie aus einer Fülle von schönen Bildübergangseffekten auswählen können. Dabei können Sie die Geschwindigkeit bestimmen und auch eine Navigation zum Weiterblättern einbinden.

    Im praktischen Einsatz können Sie sich diese Effekte in unserem Cycle-AnwendungsbeispielAnzeigen ansehen.

  • Unser zweites Beispiel ist ein Lightbox-Clone von Leandro Vieira. Damit werden kleine Vorschaubilder angezeigt, die sich beim Anklicken auf sehr raffinierte Weise vergrößern: Die Vergrößerung findet schrittweise statt, gleichzeitig wird die restliche Webseite leicht abgedunkelt.

    Auch den Lightbox-EffektAnzeigen können Sie als Beispiel selbst einmal testen.

  • Das dritte Beispiel mit dem passenden Namen "Galleria" ist geeignet, wenn eine kleine Bildergalerie zum echten Hingucker werden soll: An der einen Seite sind die kleinen Vorschaubilder angeordnet, ein Klick darauf zeigt das Bild vergrößert direkt daneben.

    Auch Galleria können Sie sich wieder als BeispielgalerieAnzeigen anschauen.

Die Fotos

Die Fotos, die wir für diese jQuery-Demos verwendet haben, hat uns Jacqueline Esen zur Verfügung gestellt.

Wozu diese Anleitung?

Diese Effekte über JavaScript selbst zu programmieren, wäre mühsam und aufwändig. Mit der JavaScript-Bibliothek jQuery und den vielen speziellen Plugins für viele unterschiedliche Einsatzzwecke geht es einfach und praktisch. Dieser Leitfaden zeigt Ihnen, wie Sie diese Möglichkeit auf Ihren eigenen Websites nutzen können.

Große JavaScript-Vorkenntnisse werden dabei nicht vorausgesetzt. Es reicht, wenn Sie ein wenig Erfahrung im Umgang mit HTML und ggf. CSS haben und Quellcode in einem Editor bearbeiten und die Dateien auf Ihren Webserver hochladen können.

Damit Ihr Weg zur eigenen Galerie einfach und komplikationslos wird, erklären wir Ihnen, wo Sie die jQuery-Biblothek und die verschiedenen Plugins dafür erhalten, wie Sie diese installieren und was Sie tun müssen, um die Dateien an Ihre Website und nach Ihren Wünschen anzupassen. Außerdem gibt es viele Beispiele, um die jeweiligen Effekte zu demonstrieren.