Howto: Lightbox in Coppermine einbauen

[Gast]

Willkommen Gast. Bitte einloggen oder registrieren.

Einloggen mit Benutzername und Passwort

[Pat Satanus]

Zusammenfassung
In dieser Zusammenfassung fließt alles mit ein, was in diesem Thread erklärt, verbessert und gelöst wurde. Im Anhang findet ihr den kompletten Inhalt des Coppermine-Templates mx-port. Die Lightbox wurde für dieses HowTo an dieses Template angepasst, kann aber auch in anderen Templates eingebunden werden. Das Prinzip und die Vorgehensweise sind eigentlich gleich.

1. Sicherung
Sichert den kompletten Inhalt des Theme-Ordners mx-port eurer Coppermine-Galerie BEVOR ihr irgendetwas verändert, ersetzt oder hochladet! Es könnte ja sein, daß irgendwas schief geht oder euch die Lightbox nicht gefällt, dann muß das Original wieder zurück auf den Server.

2. Download der Dateien
Im Anhang sind zwei Dateien (Lightbox und LightboxImages) als .zip gepackt. In den gepackten Dateien sind alle Programmteile enthalten, die ihr benötigt. Sie sind so eingestellt, daß die Farben und Rahmen neutral sind.

3. Die einzelnen Dateien und die Änderungen
3.1 template.html
In der template.html müssen die Pfade eurer Seite richtig angelegt werden. In der angehängten template.html sieht es so aus:

Code: [Select]  

 
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="http://www.deine-seite.de/modules/Gallery/themes/mx-port/js/prototype.js"></script>
<script type="text/javascript" src="http://www.deine-seite.de/modules/Gallery/themes/mx-port/js/scriptaculous.js?load=effects,builder"></script>

Das deine-seite.de muß durch euren Seitennamen ersetzt werden!

3.2 style.css
Die style.css wurde mit dem Lightbox-Code erweitert. Ab Zeile 533 gehen die Einstellungen für die Lightbox los. Dort könnt ihr Hintergrundfarben, Fenstergrößen und alles mögliche einstellen. Ein paar kleine Tipps für die individuelle Gestaltung gebe ich euch hier.
Zeile 538: Hier wird die Rahmenfarbe des Containers angegeben (background-color: #fff). Ändert diesen Hex-Wert in die gewünschte Farbe, schon wird der Rahmen bunt.
Zeile 552: Damit auch der untere Rand mit den Datei-Infos und den Close-Button die gleiche Farbe hat, hier den Hex-Wert einstellen. Logischerweise sollte es der gleiche Wert sein wie in Zeile 538.
Zeile 560: Hier wird das Overlay (die Farbe des abgedunkelten Bereiches) bestimmt. Gegen Ende dieser Zeile findet ihr wieder einen Hex-Wert, wenn ihr den ändert, wird die Farbe verändert, die den Hintergrund abdunkelt, wenn ein Bild aufgeht.
(Ein Beispiel mit einem rötlich abgedunkeltem Hintergrund hier: Pat´s Galerie.

3.3 lightbox.js
Im Ordner js findet ihr die lightbox.js. Hier gibt es Einstellungen, die z.B. die Intensität des abgedunkelten Bereichs regelt oder die Geschwindigkeit des resize.

overlayOpacity: 0.6
Dieser Wert bestimmt die Intensität des abgedunkelten Bereiches. Werte zwischen 0.1 (sehr hell) und 1.0 (total abgedunkelt) sind möglich. Vorsicht! Die Dezimalstelle wird mit einem PUNKT erstellt, nicht mit einem Komma.

animate: true
Soll das Bild animiert werden? true bedeutet ja, false bedeutet nein

resizeSpeed: 6
Die Zeit, wie lange es dauert, bis die Bildgröße angepasst wird. 1: sehr langsam, 10: sehr schnell

bordersize: 10
Wenn ihr in der style.css die Rahmengröße verändert, muß dieser Wert hier angepasst werden.

Den Rest der lightbox.js bitte nicht verändern, es sei denn, ich wisst ganz genau, was ihr macht!

3.4 Die anderen Dateien im Ordner
Die anderen Dateien braucht ihr nicht zu ändern, alle Anpassungen werden in den oben genannten Dateien gemacht.

4. Bilder prev, next und close
Die einzelnen Bilder findet ihr im image-Ordner. Hier die einzelnen Namen:
close.gif:
closelabel.gif:
loading.gif:
nextlabel.gif:
prevlabel.gif:

Diese Bilder könnt ihr mit jedem beliebigen Grafikprogramm bearbeiten.

5. UpLoad auf den Server
Nachdem ihr die Einstellungen so gemacht habt, wie sie euch gefallen und in der template.html den Pfad richtig angepasst habt, könnt ihr mit einem ftp Programm (hier WS_FTP) den kompletten Inhalt des mx-port Ordners in das Verzeichnis httpdocs/modules/Gallery/theme/mx-port hochladen. Vorhandene Dateien müssen ersetzt werden, sonst funktioniert die Lightbox nicht. Solltet ihr ein anderes Template bearbeiten, dann bitte entsprechend ändern.
Die Ordnerstruktur sollte dann so aussehen:


Diese Dateien sind auf jeden Fall wichtig, damit die Lightbox auch weiß, wo und wie sie zu arbeiten hat.

Weitere Einstellungen in der Coppermine oder PMX sind nicht erforderlich.

6. Danksagungen
Danke an Mainzer, er hat einen entscheidenden Schritt dazu beigetragen, daß die Lightbox funktioniert.
Danke an alle, die mich auf die richtige Spur gebracht haben.
Danke an diejenigen, die hier geholfen haben.

[Mainzer]

Nichts zu Danken
Es funzt und das ist gut so!
Danke auch an Dich PatSatanus und den Rest
Mal schauen was wir als nächstes zerlegen können?
gruß aus Mainz

EDIT: CLOSE?

[JoergK]

Hoi

Wie bereits im Beitrag http://www.pragmamx.org/Forum-topic-27254-start-msg178750.html#new erwähnt, bei Fragen oder Problemen bitte einen neuen Beitrag erstellen.

EDIT: CLOSE?

Yep, derweil das ne Anleitung und kein Diskussionsbeitrag ist.