Ve své minulém příspěvku s fotkami z Orlických hor jsem na prohlížení obrázků použil efektní javascriptovou miniaplikaci Lightbox.

Lightbox aplikovaný na náhledové obrázky způsobí, že se po kliknutí na obrázek okolní plocha stránek zatemní, zpoloprůhlední do černa, přičemž je stále dobře rozpoznatelná, ale jakožto ztmavená tolik nenarušuje rozkliknutý objekt, který má díky Lightboxu navíc šikovné a kontrast zvyšující cca 10px široké, bílé orámování.

Pokud se i vám Lightbox, potažmo „Lightbox efekt“ líbí tak, jako mně, zde máte podrobný návod na jeho zprovoznění, plus jako bonus drobné přizpůsobení v podobě počeštění a návodu na editaci či vložení vlastního textu pod prohlíženými obrázky či fotkami. Zhasněte světla, začínáme.

--------

Postup:

0) Ukázka jak Lightbox funguje v praxi. Klikněte na obrázek:

--

1) Stáhněte si Lightbox (vizuální český překlad Lightboxu naleznete na koncu článku v tipech)
stahuj Lightbox v2.03.3

--

2) Stažený lightbox2.03.3­.zip rozbalte a nahrajte na úroveň jednotlivých složek webu tak, aby byl na stejné úrovni jako stránka, na kterou jej chcete aplikovat. Pokud máte rozvětvenější web a Lightbox umisťujete do jiné úrovně, tak musíte ručně zadat (změnit) cestu v CSS souboru.

--

3) Do hlavičky stránky (mezi tagy <head> a </head>), na kterou chcete Lightbox aplikovat, vložte následující kód:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Upozornění: kvůli malé šířce jsem byl nucen druhý řádek rozdělit na dvě části, proto při vkládání do (X)HTML kódu dávejte pozor, aby mezi "...javascript"" a "src..." byla mezera! To samé platí i u následujícího kódu ve 4. kroku mezi „…css"“ a „type…“.

--

4) Do hlavičky stránky vložte též tento kód s CSS Lightboxu. Druhou možností je, že ho do hlavičky nevložíte, ale otevřete ve složce „css“ soubor „lightbox.css“, celý označíte (Ctrl+A) a vložíte (Ctrl+I) na konec (pro vlastní přehlednost) vašeho CSS souboru, který už na stránce používate.

<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen" />

--

5) Do odkazu obalujícího objekt, na něž chcete Lightbox aplikovat, vložte atribut rel="lightbox", pokud chcete u objektu zobrazit popisek, vložte ještě atribut title="popisek", viz. příklad níže:

<a href="složka s velkým obrázkem/velký obrázek" rel="lightbox" title="popisek"><img src="složka s náhledovým (malým) obrázkem/náhledový obrázek" alt="" /></a>

--

6) Pokud máte více obrázků nebo set fotografií, které spolu nějak souvisí, můžete je prohlížet za sebou, aniž byste vždy zavírali aktuálně prohlížený objekt a klikali na další. Stačí, když místo rel="lightbox" napíšete do odkazů na jednotlivé obrázky rel="lightbox[roadtrip]", Lightbox si je už sám spojí a vy jen klikáte do pravé části pro přechod na následující obrázky nebo do části levé na obrázky předešlé. Pro zavření buď klikněte vně objektu, na křížek (CLOSE/ZAVŘÍT) vpravo dole a nebo zmáčkněte klávesu „X“.

--------

Tipy:

 – Pro ty z vás, kteří by Lightbox rádi s českými popisky u náhledů jsem připravil počeštěnou verzi: Lightbox v2.03.3_CS

 – Chcete-li si ještě dále upravit popisek před číslem značícím o kolikátý obrázek či fotku z kolika se jedná a nevyhovuje vám mnou nastavená hodnota „Foto“, můžete si ji změnit v souboru „js/lightbox.js“, kde vyhledáte (Ctrl+F) výraz „Foto“ a přepíšete dle libosti.

--------

Doporučuji:

oficiální stránky Lightboxu (EN):
http://www.lo­keshdhakar.com/pro­jects/lightbox2/

oficiálni fórum (EN): http://www.hud­dletogether.com/fo­rum/