xom`s pinion - Tom Hnatovsky Blog

Přichází xbo! Javascriptové náhledy obrázků..

15. října 2006 Web design 24 komentářů

Právě teď vypouštím první verzi Javascriptového nástroje, který ulehčuje uživateli používání stránky s odkazy na obrázky – zobrazuje je v pomocném boxu. Pracovní název celého skriptu byl xomojátka, protože původní idea byla zobrazovat obrázek v plovoucím okně pod odkazem, při najetí kurzoru myši, což vzdáleně připomíná Derova Cotojátka. Potom jsem promýšlel funkčnost čím dál více do hloubky a vznikl mi z toho takový Lightbox, který je otevřenější pro možné zásahy uživatele. A finální název xbo vychází ze „xom`s box“, radši bych použil xbox, ale to by něco připomínalo.. ;o)

Pojďme se podívat na možnosti, které nám celý skript nabízí. xbo se nastavuje přidáváním hodnot do asociovaného pole settings, tudíž není těžké si nastavit chování přesně dle potřeb, když znáte možné parametry.

Parametry

V následujících řádcích budu používat pro element, ve kterém se zobrazuje obrázek, názvu box.

• settings["class"] = "imageView"; Definice atributu class, použitého k vlastnímu nastylování boxu. Bez použití se nastaví automatický styl.
• settings["windowID"] = "imageBox"; Definice atributu id podle kterého bude nalezen box v kódu – tzn. že se nebude vytvářet nový element. Doporučený element je DIV.
• settings["action"] = "click"; Definice akce, po které se spustí/ukáže box. Přednastavený je onmousemove, Další povolená hodnota je pouze „click“ (zatím).
• settings["autoPosition"] = true; Booleanovská hodnota určuje zda-li se box pozivuje automaticky – automaticky znamená ihned pod odkazem.
• settings["elementName"] = 'obrazek'; Restrikce funkčnosti skriptu pouze na elementy stejné třídy, na jiné nebudou funkce xbo aplikovány.
• settings["relativePosition"] = true; Zapnutí relativního pozicování boxu, to znamená, že se objevuje na viditelné pozici stránky (když máte odscrollováno dolů, tak se objeví u horního okraje aktuální pozice stránky.)
• settings["relativePositionX"] = 30; Definice kolik px od levého okraje stránky se box zobrazí v módu relativního pozicování.
• settings["relativePositionY"] = 30; Definice kolik px od vrchního okraje stránky se box zobrazí v módu relativního pozicování.
• settings["image"] = true; Zapnutí zobrazování pouze pro obrázky – momentálně musí být vždy nastavováno na true – figuruje kvůli dalšímu vývoji – práce s textem na odkazovaných stránkách.
• settings["hide"] = true; Zapnutí automatického schovávání boxu.
• settings["template"] = '<h4>%title%</h4><img src="%href%" alt="%title%"/>'; Definice šablony textu, který se zobrazuje v boxu. Zde figuruje několik proměnných, které se nahrazují údaji z aktivujícího elementu A. Proměnné jsou %title% a %href% (lze odkazovat i přes %src% při chybné záměně atributů kodérem.)

Šablona ve stávající verzi musí obsahovat minimálně jeden element IMG, do kterého se bude vkládat obrázek. Při použití více obrázků v šabloně bude použit první element. Pokud šablona neobsahuje element IMG, použije se přednastavená.

Ukázky

Pro představu funkčnosti jsem připravil pár ukázek:

• Dynamický náhled obrázku pod odkazem.
• Náhled obrázku v relativně pozivovaném textu po kliknutí – podobné nastavení je použito na mé obchodní prezentaci.
• Dynamický náhled obrázků v pevném boxu – ideální pro fotogalerii.

Vložení do stránky, aktivace

Vložení skriptu do stránky učiňte touto definicí v HEAD elementu stránky: <script type="text/javascript" src="xbo.js"></script> – pokud je nastavení definováno v souboru skriptu, tak nemusíte pro funkčnost nic více přidávat, samo se vše inicializuje po načtení stránky.

Tak toto je vše z prvního představní nástroje xbo, můžete si ho stáhnout (1.3kB), testovat, používat, samozřejmě, že budu rád za jakékoliv ohlasy – osobně jsem zatím testoval chování v Explorer, Firefoxu a Opeře, předpokládám, že budu ještě drobně ladit pro Konqueror (bohužel poslední dobou nejsem u Linuxu.)

Výhledově bych chtěl dotáhnout nějaké načítací efekty a poladění ve starších verzích prohlížečů, tak mi přejte ať mám trochu čas.. ;o)