Pekné zobrazovanie obrázkov – Thickbox

Efektné zobrazenie obrázkov v plnej veľkosti vo fotogalériách, či akýchkoľvek weboch, kde sa pracuje s fotografiami, je dnes už relatívne jednoduché vďaka rôznym pre-made javascriptom typu Thickbox alebo Lightbox, ktoré jednoduchou implementáciou zabezpečia pekný a hlavne praktický efekt.
Vzhľadom na to, že Thickbox umožňuje trochu viac než Lightbox, budem sa mu v tomto príspevku venovať. Okrem elegantného zobrazenia plnej veľkosti obrázku v okne, v javascriptovom okne, ktoré s využitím CSS efektu transparency prekryje celé okno prehliadača, dokáže totiž zabezpečiť aj automaticky generovaný preklik na ďalšie a predchádzajúce fotografie z galérie.
Thickbox, ako množstvo iných skriptov, používa knižnicu jQuery. Pre správnu funkčnosť si ju teda musíte stiahnuť z http://jquery.com/. Samotná implementácia je jednoduchá a zahŕňa iba nahratie externých JS súborov do stránky.

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

Tento kód musí byť vložený v hlavičke stránky, upozrňujem, že jQuery musí byť nahratá pred Thickboxom, teda v takom poradí, ako je uvedené.

Dôležité je tiež vložiť CSS súbor, kde je definovaný vzhľad okna Thickboxu.

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

Tak, to by bolo nahratie potrebných súborov, teraz samotné použitie. To je veľmi jednoduché, no zatiaľčo niektoré podobne JS využívajú atribút rel, Thickbox používa na identifikáciu obrázkov atribút class.

<a href="cesta/k/obrazku.jpg" title="Popis obrazku" class="thickbox"><img src="cesta/k/obrazku.jpg" alt="Alt text"/></a>

Atribút rel je využívaný pokiaľ máme na jednej stránke zobrazených viacero galérií, ktoré majú byť zoradené do skupín (a teda aby prepínanie thickboxu Ďalšia/Predchád­zajúca fungovalo vždy v rámci jednej galérie).

<a href="cesta/k/obrazku.jpg" title="Popis obrazku" class="thickbox"><img src="cesta/k/obrazku.jpg" alt="Alt text" rel="nazov-galerie"/></a>
<a href="cesta/k/obrazku.jpg" title="Popis obrazku" class="thickbox"><img src="cesta/k/obrazku.jpg" alt="Alt text" rel="nazov-galerie"/></a>

Veľmi silnou vlastnosťou Thickboxu je automatické prispôsobenie veľkosti fotky rozlíšeniu obrazovky. Pokiaľ teda bude fotka o rozmeroch 3000×2000 pixelov, nebude žiadny problém s jej zobrazením, skrátka zaplní cca 80% monitoru, ani o chlp viac. Samozrejme, takéto prípady je lepšie riešiť na úrovni PHP a nedovoliť fotke dosahovať takýto extrémny rozmer, ale o tom niekedy inokedy.

Demo

Thickbox používame aj na PHPBlogu, takže ho môžete vidieť v akcii hneď teraz.

Tomáš Mašek