Anzeige
Tutorialbeschreibung

Einfache Bildergalerie mit Colorbox

Einfache Bildergalerie mit Colorbox

In diesem Tutorial wird erklärt, wie man für Drupal 7 mit wenig Aufwand eine schöne Bildergalerie mit Lightbox-Effekt erstellen kann.


Module

Folgende Module müssen für die Bildergalerie installiert werden / sein.

Field*
Image*
Colorbox

* Diese Module sind bereits bei der vollständigen Drupal-7-Core-Installation dabei.


Colorbox uploaden und Module installieren

Bevor das Modul Colorbox installiert wird, sollte das Plug-In Colorbox hochgeladen werden. Das Plug-In ist hier zu finden: http://www.jacklmoore.com/colorbox. Lade das Plug-In herunter, entpacke es vollständig und lade es über eine ftp-Verbindung in das Verzeichnis "sites/all/libraries". Ist das Verzeichnis noch nicht vorhanden, muss es erstellt werden.

Anschließend können die Module der Reihe nach installiert werden. Dazu einfach den Pfad zum Download kopieren und unter Module>Neues Modul installieren einfügen.

Bilder



 

Neue Bildstile für die Galerie definieren

Bildstile können im Adminbereich unter Konfiguration>Bildstile definiert werden. Klicke dort auf + Stil hinzufügen. Als Erstes definieren wir, wie das Vorschaubild (Thumbnail) aussehen soll.

Bilder



Nach dem Erstellen des neuen Stils gelangt man direkt auf die Bearbeitungsseite. Dort wird auf der rechten Seite angezeigt, wie das Bild aussehen wird. Unten können die Effekte eingestellt werden. Für das Vorschaubild wählen wir den Effekt Skalieren und zuschneiden und fügen diesen hinzu.

Bilder



 
Als Breite und Höhe definieren wir je 100px. Die Einstellungen werden alle bestätigt (dieses können im später natürlich auch wieder geändert werden).

Dasselbe machen wir nun für das effektive Bild. So stellen wir sicher, dass später alle Bilder gleich groß angezeigt werden, und dass zu große Bilder automatisch zugeschnitten werden. Wir erstellen also einen weiteren Stil "galerie_view" und lassen das Bild so auf 800x600 px zuschneiden und verkleinern (-> wie vorher Skalieren und zuschneiden).


Neuen Inhaltstyp "Galerie" erstellen

Die Inhaltstypen werden im Admin-Bereich unter "Struktur>Inhaltstypen" definiert. Wir fügen einen neuen Inhaltstyp für die Galerie hinzu. Stelle den Inhaltstyp wie gewünscht ein und klicke auf "Speichern und Felder hinzufügen".

In diesem Inhaltstyp wird nun unter Felder verwalten ein neues Feld mit "Galerie Bilder" hinzugefügt.

Bilder



Feldtyp und Steuerelement = Bild. Unter Bearbeiten muss hier der maximale Wert auf Unbegrenzt gesetzt werden, ansonsten kann pro Seite nur 1 Bild hochgeladen werden.

Bilder



Ebenfalls unter Bearbeiten können diverse Einstellungen für den Upload vorgenommen werden, z.B. ein spezielles Uploadverzeichnis, zugelassene Dateiendungen, Standard-Bild usw. Ich habe daran nichts verändert.

 
Ist das Feld erstellt, kann die Anzeige unter Anzeige verwalten richtig definiert werden:

Bilder



Das vorher erstellte neue Feld "Galerie Bilder" wird hier nun angezeigt. Die Feldbeschriftung kann auf <Versteckt> geändert werden, das Format wird auf Colorbox eingestellt. Wird das Format auf Colorbox geändert, können noch weitere Einstellungen gemacht werden.

Bilder



Hier können jetzt die vorher definierten Bildstile verwendet werden:

Bilder



Danach alles speichern.


 

Verwenden

Fügt man jetzt einen neuen Inhalt ein, kann neben Artikel und Einfache Seite ebenfalls Bildergalerie ausgewählt werden.

Bilder



Und hier taucht dann auch das definierte neue Feld Galerie Bilder auf. Dort können die Bilder für die Bildergalerie eingefügt werden.

Bilder



 
Nun muss aber noch das CSS angepasst werden, damit die Thumbnails nicht alle untereinander angezeigt werden. Dies kann entweder mit dem Modul CSS Injector (http://drupal.org/project/css_injector) oder direkt in der CSS-Datei auf dem Server angepasst werden.

Der installierte CSS Injector ist nach dem Installieren im Admin-Bereich unter Konfiguration>CSS Injector zu finden. Damit die Bilder nicht mehr untereinander angezeigt werden, habe ich folgenden Code eingefügt:
.field-name-field-galerie-bilder img {
float: left;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px !important;
}

.field-name-field-galerie-bilder {
clear: left;
display: block;
}

"field-galerie-bilder" ist hier der Feldname von "Galerie Bilder". Dieser Name kann bei den Inhaltstypen nachgeschaut werden.

Bilder



 
Bei Klick auf ein Bild wird dann (vorausgesetzt, das Plug-In für die Colorbox wurde richtig installiert) die Colorbox angezeigt.

Bilder



Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von tarcisius1996
  • 04.12.2016 - 13:34

Hallo,
danke für das tolle Tutorial. Hat super geklappt.

Nur bei einer Sache hänge ich momentan noch.
Wenn ich auf einer Seite einen Text schreibe, dann setzt sich direkt darunter eine kleine Linie. Wenn ich jetzt Bilder über die Colorbox hinzufüge, dann bleibt die Linie direkt unter dem Text und verschiebt sich nicht mit unter die Bilder. Sieht irgendwie blöd aus.
Kann mir hier noch jemand einen Tipp geben?

Danke!

Portrait von stellamarina
  • 16.01.2013 - 11:35

Ist es jetzt richtig? In der PDF ist der Code jetzt sichtbar, aber ob es inhaltlich richtig ist, kann ich leider nicht beurteilen. ;-)

Portrait von nfo17
  • 14.12.2012 - 12:46

Also das Tutorial ist echt gut. Leicht verständlich und gut umgesetzt. Nur eins wundert mich, am Ende wird bei mir im PDF der Code den du beim CSS eingefügt hast, dass die Bilder nicht untereinander sondern nebeneinander sind nicht angezeigt. Liegt das an mir oder geht das allen so?

Portrait von mosera
  • 16.01.2013 - 00:35

Ich finde das Tutorial auch gut, besten Dank. Mangels Programmierkenntnisse bin ich auf solche Anleitungen angewiesen. Den CSS-Code habe ich im PDF auch nicht gefunden, aber auf der Startseite (unangmeldet) ist er im HTML-Text unten enthalten.
Ich habe den Code wie beschrieben hinterlegt, die Bilder sind aber immer noch vertikal orientiert. Bin an einer Horizontal-Lösung nach wie vor interessiert.
LG und

Portrait von salix13
  • 16.01.2013 - 09:13

Sorry, ich hab echt keine Ahnung warum der Code nicht angezeigt wird, ich werde mal nachfragen.

Zum CSS-Code: Wichtig ist der Name der Klasse. Wie die Klasse heissen soll, muss man zuerst mal herausfinden. Unter den Inhaltstypen - Felder verwalten werden die "Maschinenlesbaren Namen" aufgeführt. Versuch mal die _ mit - zu ersetzen, bei mir hat es so dann funktioniert.

Liebe Grüsse und viel Erfolg.
salix

Portrait von gabphoto
  • 13.12.2012 - 16:39

Vielen Dank für das Tutorial.

Portrait von MicroSmurf
Portrait von der_fou
  • 08.12.2012 - 13:34

Danke fürs feine tutorial.
Kommt grad zur rechten Zeit! ;-:)

LG und allzeit "gut LIcht"!

Portrait von MaoMao
  • 08.12.2012 - 12:27

Vielen Dank für das gut erklärte Tutorial.

x
×
×