Poprvé jsem se s javaskriptem Lightbox, který umožňuje efektní zobrazování obrázků bez nutnosti otevírat klasické nové okno browseru, setkal v Ronyho článku, kde popisuje jak neotvírat obrázky v novém okně a co místo toho využít. A dlouhou dobu jsem byl s touto pomůckou spokojen. Nedávno jsem ale narazil na podobnou záležitost, která toho ale umí ještě více. Malý skriptík, který umožňuje kromě obrázků otevírat či zobrazovat podobným způsobem i jiné objekty jako například celé stránky – třeba místo využití iframe nebo otevření v novém okně. Jmenuje se podobně, GreyBox.

Něco podobného jsem pro své stránky o počasí potřeboval. Místo otevírání a zobrazování informací v klasickém iframe můžu teď zobrazovat informace v šikovném okénku, bez opuštění mé stránky, bez zvýšených nároků na data, která se při použití iframe načítala vždy kompletní. To vše teď odpadlo. Jenže byl tu problém. Na stávajících stránkách, ve článcích a u mnoha obrázků byl použit Lightbox (klausule rel=“lightbox“) a to by znamenalo současně provozovat oba systémy – jak starý Lightbox, tak u nových článků GreyBox. A to mě samozřejmě netěšilo a tak jsem se rozhodl, že se to pokusím vyřešit.

Myšlenku ruční úpravy starších článků jsem si nepřipouštěl a do modifikace článků na úrovní databáze jsem se také neměl moc chuti pouštět. A tak jsem se nejprve rozhodl zkusit cestu nejmenšího odporu, tedy modifikaci onoho javascriptu GreyBox. Nějaký zparchantělý javascript mě přece jako ostříleného a dlouholetého programátora v C/C++/C# nemůže pokořit. A nakonec to ani moc nebolelo a přidáním jednoho řádečku do kódu GreyBox se vše vyřešilo. A právě o tuto modifikaci, která možná mnohým ulehčí život a přerod z Lightboxu (a jiných podobných skriptů) na GreyBox, se s vámi chci dnes podělit

Kompletní dokumentaci a stažení GreyBoxu najdete na oficiálních stránkách produktu. Poté, co jej implementujete (podle popisu) a vyzkoušíte jeho funkčnost, můžete se pustit do následující malé úpravy. Týká se výhradně souboru gb_scripts.js, kde najdete řádky:
var rel=a.getAttribute("rel");
if(rel.indexOf("gb_")==0){
což bude kolem řádku číslo 165, a mezi ně vložíte tento kousek kódu:
if(rel=="lightbox") { rel="gb_image[]";}

A to je vše. Přiznávám, je to takový malý ojeb, ale rychlý, jednoduchý a hlavně funkční. Je to vlastně jakási konverze z rel=“lightbox“ používáno Lightboxem na rel=“gb_image[]“ použité u GreyBoxu. A poté už můžete klidně stávající Lighbox zrušit bez obav z toho, že jej ve starších článcích či stránkách používáte. Po této úpravě se i v těchto případech (kdy je u odkazu rel=“lightbox“) bude používat GreyBox. Na závěr ještě jedna malá drobnost. Zhruba na řádku 8 v souboru gb_scripts.js je definována proměnná this.overlay_click_close=false;. Změnou na hodnotu true (tj. this.overlay_click_close=true;) můžete okno GreyBoxu kdykoliv opustit také kliknutím mimo něj – do zešedlé oblasti hlavního okna. Hodně zdaru.