Einfache und überzeugende JavaScript-Bildeffekte mit jQuery-Plugins

Bilder mit JavaScript effektvoll präsentieren

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

  • 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.

    Cycle: Diashow mit Übergangseffekten

    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.

    Lightbox-Demo von der Website des Plugins

    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.

    Galleria-Demo

    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.

Inhaltsverzeichnis

Beitrag bewerten

Ihre Wertung:

 

Hallo Frau Maurice,

zunächst möchte ich mich bei Ihnen recht herzlich für Ihre besonders engagierte und sofortige Hilfe bei der Lösung meines Problems bedanken. Nachdem ich fast schon geglaubt hatte, dass das ganze "Dilemma" scheinbar nicht abzustellen geht, war ich nunmehr regelrecht blaff und ehrlich gesagt ein wenig beeindruckt. Denn Ihr Lösungsvorschlag, dass $-Zeichen gegen den String "jQuery" auszutauschen, war tatsächlich die Lösung. Allerdings war dabei zu beachten, dass in der Datei jQuery.js kein Austausch erfolgen darf. Lediglich in der html-Datei und der weiteren js-Datei musste diese Maßnahme durchgeführt werden. Aber nunmehr funktionieren sämtliche 3 Varianten auch auf dem Webserver. An dieser Stelle wünsche ich Ihnen noch alles Gute und nochmals vielen, vielen Dank.

Freundliche Grüße

Andreas Piatek

Hallo Herr Piatek,

natürlich kann JavaScript auch serverseitig ausgeführt werden - aber das ist ein recht seltener Einsatzbereich. Dass serverseitig etwas dazwischenfunkt, würde mich sehr verwundern - und ist mir bisher nicht begegnet.

Also, weitere Vermutungen:

1. Groß- und Kleinschreibung bei den Pfadangaben ist korrekt?
2. Können Sie bitte einmal Folgendes testen, um ganz sicherzugehen, dass jQuery geladen wird:
- Datei im Firefox aufzurufen, in die Quellcode-Ansicht zu schalten (Ansicht/Quelltext) und dann auf die verlinkten und unterstrichenen Pfadangaben klicken. Werden die Dateien dann angezeigt? Falls irgendwie "Datei nicht gefunden" erscheint, liegt der FEhler in den Pfadangaben.
3. Eine andere Möglichkeit - vielleicht setzen Sie bereits andere JavaScript-Bibliotheken in diesem Dokument ein? Teilweise verwenden diese ebenfalls das $-Zeichen. Eine Lösung hier könnte sein, dass Sie in den jQuery-Befehlen anstelle von $ immer jQuery schreiben.

... hoffe, dass das etwas bringt ...

Schöne Grüße

Florence Maurice

Hallo Frau Maurice,

nach erneuter Überprüfung evtl. Ursachen zu dem von mir geschilderten Problem möchte ich auf die von Ihnen erwähnten evtl. Fehlerquellen folgendes mitteilen:
zu 1.: Ich habe mir für die jeweiligen 3 Varianten entsprechende Ordner mit der Bezeichnung Cycle, Lightbox bzw. Galleria angelegt. Im Ordner Galleria befinden sich 4 Dateien (Galleria.html, galleria.css, jquery.js und jquery.galleria.min.js) und ein Ordner namens "bilder". In dem Ordner "bilder" wiederum befinden sich die Bilddateien (hier sämtlich im JPG-Format). In den anderen Ordnern Cycle bzw. Lightbox befinden sich ebenso die relevanten Dateien bzw. der Ordner "bilder". Zu Testzwecken habe ich z. B. den Ordner Galleria in das Wurzelverzeichnis des Webservers meiner Homepage hochgeladen. Insofern kann Ihre Vermutung nicht zutreffen, dass ich evtl. eine Datei vergessen habe hochzuladen.
zu 2.: Im Falle des von mir ins Wurzelverzeichnis des Webservers hochgeladenen Ordners Galleria habe ich dann in der Startseite meiner Homepage unter Verwendung des entsprechenden relativen Pfades ausgehend von meiner Startseite (index.html) folgendes -Element eingefügt:
Web-Galerie. Insofern scheidet damit auch eine evtl. fehlerhafte Pfadangabe als potentielle Ursache aus. Ergänzend möchte ich noch darauf hinweisen, dass ich bereits vor einiger Zeit eine entsprechende Webgalerie auf diese Art in meiner Homepage eingefügt habe, welche ohne Probleme funktioniert.
zu 3.: In der Fehlerkonsole des Firefox wurden mir diverse Pfadangaben angezeigt, die ich Ihnen gerne bei Bedarf als Screenshot zur Verfügung stellen kann. Unter anderem wurde dabei auch folgender Fehler angezeigt: $("ul.galleria_demo") is null. Leider bin ich momentan nicht mit der Funktionsweise der jquery-Funktion vertraut, so dass ich diese Fehlermeldung nicht zu deuten in der Lage bin.

Abschließend möchte ich noch bemerken, dass Scripte, die mit JavaScript erstellt wurden, durchaus auch serverseitig ausgeführt werden können. Dies mag zwar der eher untypische Fall sein, doch kann es insofern nicht auch sein, das dieses jquery-Script serverseitig irgendwie negativ manipuliert wurde?

Freundliche Grüße

Andreas Piatek

Hallo Herr Piatek,

es gibt an sich keinen Grund, warum die Skripte und Beispielgalerien lokal funktionieren und nicht auf dem Webserver. Denn diese Skripten sind ja clientseitig, werden also im Browser und nicht auf dem Server ausgeführt, deswegen gibt es auch keine besonderen Voraussetzungen an den Server.
Überprüfen Sie bitte folgende Punkte:
1. Haben Sie auch wirklich alles benötigten JavaScript-Dateien ebenfalls auf den Server hochgeladen? Falls Sie die JavaScript-DAteien bei Ihrer lokalen Variante in einem Unterordner gespeichert haben, müssen Sie diesen gesamt ebenfalls auf den Server laden. Auch wichtig ist, dass Sie nicht vergessen, die benötigten CSS-Dateien auf den Server zu laden.
2. Sind die Pfade richtig angegeben? Das heißt, klassischer Weise relativ direkt von der Datei aus, in der sie stehen? Die Pfadangaben machen Sie am besten so, wie Sie es auch sonst bei Bildern machen. Wenn eine Pfadangabe beispielsweise mit file:///C: beginnt, dann würde das nur lokal funktionieren, nicht aber auf dem Server. (Entschuldigen Sie bitte, dass ich auch solche Banalitäten angebe, die Sie sicher wissen, aber ich schreibe einfach alles auf, woran es liegen könnte ...)
3. Kontrollieren Sie einmal, was die Fehlerkonsole von Firefox sagt. Diese rufen Sie auf über Extras/Fehlerkonsole. Dann sollten Sie erst einmal alle Meldungen löschen über den entsprechenden Button. Dann rufen Sie Ihre Seite erneut auf und sehen, was die Fehlerkonsole meldet.
"jQuery is not defined" wäre z.B. ein Hinweis, dass der Pfad zum Einbinden von jQuery nicht stimmt etc.
4. Ein anderer Weg zu prüfen, ob die JavaScript-DAteien gefunden werden, ist es, die Datei im Firefox aufzurufen, in die Quellcode-Ansicht zu schalten und dann auf die verlinkten und unterstrichenen Pfadangaben zu klicken.

Ich hoffe, das hilft Ihnen weiter ...

Schöne Grüße

Florence Maurice

Hallo Frau Maurice,

vielen Dank für Ihre umgehende Beantwortung meines Kommentars. Nach dem Download der mir von Ihnen zur Verfügung gestellten beiden Dateien war es mir nun auch möglich, die 3. Variante Galleria erfolgreich zusammenzustellen. Allerdings musste ich mit Bedauern feststellen, dass zwar sämtliche 3 Varianten (Cycle, Lightbox und Galleria) lokal auf meinem Rechner problemlos abliefen, jedoch keine einzige Variante auf meiner Homepage korrekt funktionierte. Eigentlich sehr schade, da es sich hierbei um wirklich gut gestaltete Webgalerien handelt.

Freundliche Grüße

Andreas Piatek

Hallo Herr Piatek,

vielen Dank für den Hinweis! ja Galleria wird wohl wirklich gerade grundlegend überarbeitet. Wenn dann die neue Version endgültig erschienen ist, werde ich sie hier berücksichtigen.
Bis dahin können Sie die ursprünglichen Dateien über meine Beispiele herunterladen.

1. CSS-Datei: http://www.akademie.de/dateien/downloads/54256_jquery/galleria.css
2. JavaScript-Datei: http://www.akademie.de/dateien/downloads/54256_jquery/jquery.galleria.mi...

Ich hoffe, das hilft Ihnen weiter.

Schöne Grüße

Florence Maurice

Sehr geehrte Frau Maurice,

mit großer Begeisterung habe ich Ihren insgesamt sehr guten Kurs durchgearbeitet. Leider war es mir hierbei nur möglich, die ersten beiden Varianten (Cycle und Lightbox) erfolgreich umzusetzen. Die Realisierung der 3. Variante Galleria scheiterte daran, dass es mir nicht gelang, die 2 passenden Dateien jquery.galleria.min.js und galleria.css herunterzuladen. Dies lag sicherlich daran, dass auf der entsprechenden Webseite zwischenzeitlich ein Update zur Version 1.2 erfolgt ist und somit die von Ihnen angegebenen Dateien in dieser Form nicht mehr verfügbar sind. Leider konte ich nicht in Erfahrung bringen, welche Dateien nunmehr relevant sind.

Freundliche Grüße

Andreas Piatek

Hallo Herr Muravyov,

also - ich habe es gerade auch noch mal getestet - der Lightbox-Clone und das gezeigte Beispiel funktioniert prinzipiell im Firefox, d.h. sowohl im Firefox 2.x als auch im aktuellen Firefox 3.0.7.
Falls es nicht funktioniert, muss es irgendwelche anderen Ursachen haben.
Dass JavaScript aktiviert ist, haben Sie sicher überprüft (Extras/Einstellungen/Inhalt/JavaScript aktivieren).
Weitergehende Hilfe bietet dann auch die Fehlerkonsole von Firefox, die Sie über "Extras/Fehlerkonsole" aufrufen. Erscheint dort beispielsweise die Meldung "jQuery is not defined" wäre das ein Hinweis, dass der Pfad zum Einbinden von jQuery nicht stimmt etc.
Ich hoffe, das hilft Ihnen weiter ...

Schöne Grüße

Florence Maurice

Vielen Dank für Ihren Superkurs!!!
Leider funktioniert "meinegalerie" in manchen Browser (Firefox) nicht. Warum?
Oleksandr Muravyov

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

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