Hi Folx!
Nachdem ich einem Bekannten erfolgreich bei der Installation und Einrichtung der Lightbox für die Coppermine helfen konnte und auch versprochen habe, die Lösung zu schreiben, bitteschön. Hier für jeden einmal die komplette Vorgehensweise, wie sie funktioniert (zumindest bei Fred, Toby und mir). Wenn man sich Schritt für Schritt an dieses HowTo hält, kann eigentlich nichts schiefgehen.
Natürlich übernehme ich keinerlei Verantwortung, wenn das nicht funktioniert. Versteht sich wohl von selbst...
Let´s start...
Schritt 1 - Sicherung:
Sichert den kompletten Inhalt des Theme-Ordners eurer Coppermine-Galerie
BEVOR ihr irgendetwas verändert, ersetzt oder hochladet!
Schritt 2 - Upload:
Mit dem ftp-Programm eurer Wahl müßt ihr die kompletten Ordner "images" und "js" samt Inhalten in den Theme-Ordner von Coppermine laden (also in den Ordner modules/Gallery/themes/dein-theme) hochladen. Die Dateien template.html, theme.php, style.css und index.html werden ebenfalls dorthin hochgeladen.
Die Ordnerstruktur muß dann wie auf dem Bild unten aussehen:
Diese Dateien sind auf jeden Fall wichtig, damit die Lightbox auch weiß, wo und wie sie arbeiten muß.
Schritt 3 - Pfade in template.html:
In der template.html müssen die Pfade eurer Seite richtig angelegt werden. In der angehängten Version sieht es so aus:
<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>
<script type="text/javascript" src="http://www.deine-seite.de/modules/Gallery/themes/mx-port/js/lightbox.js"></script>
Das deine-seite.de muß dementsprechend abgeändert werden.
Schritt 4 - Die 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: #000). Ä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.
Was ganz feines verbirgt sich in der Zeile 560. Hier wird das Overlay 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. (Beispiel mit einem rötlich abgedunkeltem Hintergrund hier:
Pat´s Galerie.
Schritt 5 - Einstellungen in der lightbox.js:
Im Ordner js findet ihr die lightbox.js. Dort kann man ab der Zeile 50 ein paar Einstellungen machen. Zum Beispiel, wie breit der Rand neben dem Bild sein soll, wie lange das Bild für den resize braucht usw. Einfach mal ausprobieren, was euch am besten gefällt.
Vorsicht! Geht nicht ans Eingemachte, sondern ändert nur die Werte oben.
Mehr fällt mir gerade nicht ein, wenn Fragen bestehen, dann fragt. Gerne helfe ich weiter, wenn ich denn kann. Und wenn ihr ein wenig ausprobiert, ist das auch ganz gut. Learning by doing!
Die benötigten Dateien für die Lightbox findet ihr als gepackte Archivdateien im Anhang. Die erste Datei enthält die template.html, die style.css, die theme.php, die index.html und den Ordner js. Die zweite Datei enthält den Ordner images.
Hoffe, euch bringt diese Anleitung etwas.
So long...
Pat
pragmaMx Support Forum
