CMS Made Simple - Official website CMS made Simple Czech Site Zur deutschsprachigen Supportseite CMS Made Simple - Danmark Sitio en Castellano Site francophone Benvenuto su CMSmadesimple CMSMS -  русский CMS Made Simple - slovenská verzia
Facebook

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'}
Ezek után a képek beillesztése következik, ha már megtettük a WYSIWYG szerkesztővel, akkor váltsunk html kód nézetbe és a kép helyére illessztük be ezt a sort:
  • {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:
#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!

Kiegészítés!

Az új verziókban ez már helyesen van a lightbox.css-be, így nem szükséges a szerkesztése.

Előző oldal: Keresés gomb képpel    Következő oldal: Thumbnail
( Készült: 2010. 12. 03. 10.00 Módosítva: 2011. 01. 13. 19.19 )