Diskusia k článku

Pekné zobrazovanie obrázkov – Thickbox

Vail
Dátum a čas 22. 08. 2009, 18:19

Ahoj, chcel by som poprosit o radu. Pouzil som tvoj navod a funkcnost sa konci vo chvili ked chcem rozbehat prepinanie medzi obrazkami v 1 galerii. Pouzil som aj navod z offi stranky kde som stiahol js a css skripty, pretoze umiestnenie rel="" je tam ine a to nefunguje uz vobec. Skusal som to asi 100 krat a tak by som ta chcel poprosit ci aspon naaahodou netusis kde by mohla byt chyba... Vopred dakujem... :)

robeno
Dátum a čas 14. 06. 2009, 21:22 E-mail robenosk [a] gmail.com

Existuje aj nejaky script ktory by vykonal iba ten border okolo obrazku?

naspäť

Pridať komentár

_{Náhľad článku}

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ádzajú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.