Eine Online-Bildergalerie ist perfekt, um Fotos zu präsentieren und mit Besuchern der Website zu interagieren.
Das Lightbox-Plug-in für jQuery ist eine kostenlose Ressource, mit der Sie rasch Bildergalerien erstellen können.
In diesem Video erfahren Sie, wie Sie ein Bildraster anlegen und mit dem Lightbox-Plug-in eine Dia-Show Ihrer Bilder anzeigen.
Die Struktur des Galerieprojekts ist einfach.
Sehen wir uns das Bedienfeld „Dateien“ (Files) an.
Wenn Sie die Schritte nachvollziehen möchten, laden Sie die Beispieldateien herunter.
Ich wechsle zunächst zum Arbeitsbereich „Entwurf“ (Design).
Das Projekt umfasst den Ordner „images“ mit Bildern in niedriger und hoher Auflösung, den Ordner „lightbox“ für das Plug-in sowie die Dateien „gallery.html“ und „gallery.css“.
Ich werde die HTML- und CSS-Dateien in der Ansicht „Teilen“ (Split) bearbeiten, um die Galerie fertigzustellen.
In der Live-Ansicht sehen Sie das bereits angelegte Bildraster.
Wenn ich den Cursor auf einem Bild positioniere, wird die Beschriftung mit voller Deckkraft angezeigt.
Diese Interaktivität regt Besucher zum Erkunden des Rasters ein.
In der Code-Ansicht sehen Sie, dass jede Vorschau gleich aufgebaut ist: ein Anker-Tag plus ein DIV-Wrapper um ein weiteres DIV-Tag und ein IMAGE-Tag.
Das verschachtelte DIV-Tag enthält die Beschriftung.
Über die Live-Ansicht kann ich ganz einfach zum CSS navigieren.
Ich wähle das Bild aus und navigiere mit der Nach-oben-Taste zum DIV-Tag.
Dann mache ich einen Rechtsklick bzw.
Ctrl-Klick auf den Selektor und wähle „Gehe zu Code“ (Go to Code).
Dieser CSS-Code steuert den Rollover-Effekt, wenn der Cursor auf dem Bild positioniert wird, sowie die Stile der Elemente im Bildraster.
Sobald das Bildraster eingerichtet ist, lässt sich das Lightbox-Plug-in ganz leicht aktivieren.
Dazu muss man nur ein paar Dateien verknüpfen und die Anker-Tags einrichten.
Im HEAD-Tag in der HTML-Datei habe ich bereits Links zu den drei Ressourcen für Lightbox eingefügt: zum jQuery, zum Lightbox-JavaScript und zur CSS-Datei für Lightbox.
Jetzt schließe ich alles ab, indem ich Attribute zu den Anker-Tags hinzufüge.
Lightbox verwendet DATA-Attribute, um die zu ladenden Bilder zu identifizieren und ihnen einen Titel zuzuweisen.
Ich wähle in der Live-Ansicht das Anker-Tag aus und drücke Strg+T (Windows) bzw.
Befehl+T (macOS), um den Quick Tag Editor im Bearbeitungsmodus aufzurufen.
Um Lightbox zu aktivieren, füge ich die Attribute „data-lightbox“ und „data-title“ hinzu.
Fertig.
Nun muss ich nur noch die übrigen Anker-Tags aktualisieren mit den DATA-Attributen.
Für die Bilder wird nun immer das Lightbox-Skript ausgeführt, wenn man auf die Vorschau klickt.
Nun kann ich mein Design überprüfen, um sicherzugehen, dass die Lightbox-Dia-Show funktioniert.
Ich deaktiviere die Auswahlmöglichkeit in der Live-Ansicht über „Ansicht > Live-Ansicht-Optionen“ (View > Live View Options) und „Live-Ansicht ausblenden“ (Hide Live View Displays) oder mit Strg+Alt+H (Windows) bzw.
Befehl+Wahl+H (macOS).
In der Live-Ansicht fahre ich mit der Maus über die Vorschaubilder und klicke darauf, um Lightbox zu aktivieren.
Schließlich wähle ich „Datei > Vorschau in Browser“ (File > Preview in Browser), um mir die Seite anzusehen.
So einfach lässt sich eine interaktive Bildergalerie erstellen.
Die Einrichtung einer Bildergalerie ist kein Problem mit Dreamweaver CC und dem Lightbox-Plug-in.
In der Live-Ansicht können Sie Ihr Projekt anzeigen, bearbeiten und schnell zu Code navigieren.
In der Code-Ansicht und mit dem Quick Tag Editor greifen Sie auf Ihre Einstellungen zu.
Erstellen Sie doch mal ein Projekt mit derselben Struktur.
Sie können in wenigen Schritten eine Galerie für Ihr Portfolio erstellen.
Starten Sie Dreamweaver CC, und legen Sie los!
