Lightbox használata
A lightbox használata egy kis munkát igényel. A képek beillesztése nem okozhat gondot, de a lightbox effektus működésre bírása kissé bonyolultabb.
Először is ezt a két sort kell beilleszteni az oldalba (én a sablon content részébe illesztettem be, így az minden oldal esetében működni fog)
- {LightBox action='css'}
- {LightBox action='js'}
- {LightBox image='imagefile.gif'}
Ez a kódrészlet kiegészíthető még az alábbiakkal:
- (optional) title="" - A kép címe
- (optional) text="" - További szöveg a kép linkjéhez
- (optional) addtext="" - További paraméter az "image tag"-hez a kép linkjében
- (optional) name="" - A képek csoportosításához szükséges információ. Az egy néven szereplő képek egy csoportba kerülnek így létethető képgaléria hozható létre.
- (optional) thumb="" - A thumbnail URL-je. Ez fog az oldalon megjelenni
- image="" - A kép URL-je. Ez a "nagy" kép, ami a lightbox effektussal fog megjelenni
- (optional) lang="en_US" - Ez a paraméter adja meg, hogy milyen nyelv legyen használatos a frontend megjelnítéséhez. Nem minden modul kezeli/követeli meg ezen paraméter meglétét.
Tehát például ez a kép:
Ezzel a kóddal van beillesztve:
{LightBox image='/uploads/images/tippek/lightbox/20070702110_1.jpg' thumb='/uploads/images/tippek/lightbox/thumb_20070702110_1.jpg' name='proba' title='első kép'}
És persze a többi is azonos csoportba van beillesztve, tehát: name='proba'
Így az egy csoportba beillesztett képek esetében lehet előre, hátra léptetni a navigációs gombokkal. Azazhogy...
Ezzel még nincs vége a dolognak, mert ugyan a lightbox működik, de a navigációs gombokat nem jeleníti meg! Tehát , ha kép jobb (vagy bal) oldalára megyünk az egérrel, meg kellene jelennie a next > , vagy a prev > gomboknak.
De nem jelenik meg!
A megoldás a lightbox.css-ben van (/modules/LightBox/css/lightbox.css):
Ugyanis a background url-jéből hiányzik egy "/".
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(modules/LightBox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(modules/LightBox/images/nextlabel.gif) right 15% no-repeat; }
helyesen:
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(modules/LightBox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(modules/LightBox/images/nextlabel.gif) right 15% no-repeat; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/modules/LightBox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/modules/LightBox/images/nextlabel.gif) right 15% no-repeat; }
Ezzel már működik!
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/modules/LightBox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/modules/LightBox/images/nextlabel.gif) right 15% no-repeat; }