Fotoalbum mit Lightbox (lytebox)
Verfasst: Fr 23. Okt 2009, 08:17
Ich hab das Modul "Fotoalbum" (http://forum.contenido.org/viewtopic.php?f=30&t=6157) mal um eine Lightboxfunktion erweitert, da ich sonst nirgends was passendes finden konnte.
Hierzu habe ich die "lytebox" verwendet, da diese auch aus einem iFrame heraus funktioniert (s.U.).
>> http://www.dolem.com/lytebox/
Die Ausgabe habeich etwas verändert, die thumbs erscheinen jetzt unterhalb des großen Vorschaubildes, habe auch die tabellen durch css-container ersetzt
Installation:
- Alles aus dem Ordner cms hochladen
- Modul installieren
- Galerien anlegen wie Oben beschrieben
- CSS-Datei im Layout einbinden:
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />
- css-angaben in eurem Stylesheet ergänzen und nach Bedarf abändern:
iframe {height:305px}
#album {float:left;width:395px;height:500px}
#thumbs {margin-left:-5px;float:left;width:395px}
#thumbs .pic {float:left;padding-left:5px;}
#thumbnavi {float:left;font-size:11px;height:90px;margin-top:3px;margin-left:-4px;}
#frame {float:left}
Getestet ist das ganze mit ver. 4.8.11 /
Funzt in Mozilla 3.x IE8, Opera 9.5, zu mehr hatte ich noch keine Zeit
---------------------------------------------------------------------------------------------------------------
Info:
Damit die Lightbox aus einem iFrame heraus funktioniert, werden .js
& .css folgendermaßen in der Picture.php eingebunden:
<script type="text/javascript" language="javascript" src="js/lytebox.js"></script>
<link rel="stylesheet" type="text/css" href="lytebox.css" media="all" />
---------------------------------------------------------------------------------------------------------------
Jetzt wäre es schön, wenn mann noch innerhalb der Lightbox navigieren könnte, das versuche ich grad zusammenzubasteln - bin für jeden Tipp danbkar;-)
Die Lytebox sieht das vor, siehe Beispieldatei (t.html) im Ordner lytebox_v3.22.
Hierzu habe ich die "lytebox" verwendet, da diese auch aus einem iFrame heraus funktioniert (s.U.).
>> http://www.dolem.com/lytebox/
Die Ausgabe habeich etwas verändert, die thumbs erscheinen jetzt unterhalb des großen Vorschaubildes, habe auch die tabellen durch css-container ersetzt
Installation:
- Alles aus dem Ordner cms hochladen
- Modul installieren
- Galerien anlegen wie Oben beschrieben
- CSS-Datei im Layout einbinden:
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />
- css-angaben in eurem Stylesheet ergänzen und nach Bedarf abändern:
iframe {height:305px}
#album {float:left;width:395px;height:500px}
#thumbs {margin-left:-5px;float:left;width:395px}
#thumbs .pic {float:left;padding-left:5px;}
#thumbnavi {float:left;font-size:11px;height:90px;margin-top:3px;margin-left:-4px;}
#frame {float:left}
Getestet ist das ganze mit ver. 4.8.11 /
Funzt in Mozilla 3.x IE8, Opera 9.5, zu mehr hatte ich noch keine Zeit
---------------------------------------------------------------------------------------------------------------
Info:
Damit die Lightbox aus einem iFrame heraus funktioniert, werden .js
& .css folgendermaßen in der Picture.php eingebunden:
<script type="text/javascript" language="javascript" src="js/lytebox.js"></script>
<link rel="stylesheet" type="text/css" href="lytebox.css" media="all" />
---------------------------------------------------------------------------------------------------------------
Jetzt wäre es schön, wenn mann noch innerhalb der Lightbox navigieren könnte, das versuche ich grad zusammenzubasteln - bin für jeden Tipp danbkar;-)
Die Lytebox sieht das vor, siehe Beispieldatei (t.html) im Ordner lytebox_v3.22.
Verschoben nach Module 4.8.x