Příkladová stránka widgetu LightBox

Konfigurace LightBoxu

Jak jsme si ukázali na předchozí stránce, LightBox je jednoduše nasaditelný. Při bližsím pohledu zjistíme, že při vytváření instance požaduje konstruktor dva parametry. Prvním je pole s informacemi o zobrazovaných obrázcích a druhým je konfigurační objekt.

Pole obrázků je ve stejném formátu jako pro původní prohlížečku obrázků, tedy:

var data = [
	{alt: 'Západ slunce', small: {url: '/img/gallery/tn01.jpg'}, big: {url: '/img/gallery/01.jpg'} },
	{alt: 'Praděd', small: {url: '/img/gallery/tn02.jpg'}, big: {url: '/img/gallery/02.jpg'} },
	{alt: 'Klaustrofobie', small: {url: '/img/gallery/tn03.jpg'}, big: {url: '/img/gallery/03.jpg'} },
	{alt: 'Přehlídka armády', small: {url: '/img/gallery/tn04.jpg'}, big: {url: '/img/gallery/04.jpg'} }
];

Druhý konfigurační parametr je zcela jiný od původní prohlížečky obrázků a navíc poskytuje mnohem širší konfigurační možnosti. Zde je vhodné nastínit základní principy nového LightBoxu. LightBox jako takový je složen z komponent, které je možné konfigurovat samostatně a také je možné je nahradit jinou, požadovanou funkčností. V souboru s LightBoxem je definováno několik základních komponent, které lze libovolně zaměnit, nicméně je možné použít naprosto nové komponenty, které rozšiřují funkčnost LighBoxu, aniž by bylo nutné vlastní třídu LightBoxu upravovat.

Komponentní struktura LightBoxu

LightBox se skládá ze 7 základních komponent:

Tyto komponenty jsou v LightBoxu povinné a i když nejsou definované v konfiguraci, jsou použité výchozí komponenty. Některé komponenty jsou v základní verzi LighBoxu ve více verzích a je možné je v konfiguraci měnit, možné základní hodnoty jsou:

Použítí těchto komponent je následovné:

var opt = {
		components: {
			strip: JAK.LightBox.Strip.Scrollable,
			navigation: JAK.LightBox.Navigation.Basic,
			anchorage: JAK.LightBox.Anchorage.Fixed,
			main: JAK.LightBox.Main.CenteredScaled
		}
	};

	var g = new JAK.LightBox(data, opt);

Takto definovaný LightBox bude mít pás s náhledovými obrázky, zobrazenou navigaci, její pozice bude vždy ve středu okna prohlížeče a hlavní obrázek bude centrován a zmenšen do svého prostoru. Pro nenadefinované komponenty se použijí výchozí hodnoty. Otázkou zůstává jak definovat rozměry tohoto prostoru a vlastně vzhled LightBoxu.

Vzhled a rozměry LightBoxu

Vzhled a rozměry Lightboxu a vyrenderování komponent jsou čistě popsány pomocí CSS. LightBox tyto rozměry při svém zobrazení přečte a komponenty díky tomu mohou galerii např. vycentrovat, nebo zmenšit do daného prostoru hlavní obrázek.

Každá komponenta má výchozí nastavení názvu třídy obalujícího prvku. V konfiguraci je možné tuto třídu předdefinovat, nebo nadefinovat id daného prvku. Třídu i id lze přiřadit i celému Lightboxu:

var opt = {
	galleryId: 'lightBox',
	galleryClassName: 'lightboxclass',
	components: {...
	}
};

Id použijeme pokud na stránce zobrazujeme pouze jednu galerii, pokud jich je více, použijeme třídu. Výchozí styl vypadá takto:

LightBox má rozměry 930 × 462px, a box (výchozí třída imge-browser-image) pro hlavní fotku má velikost 800 × 450px. Dále je zde nastylován pás náhledů (výchozí třída image-browser-thumbs), kde vidíme, že box pro jeden náhledový obrázek má 100 × 55px. Dále je definován rámeček okolo aktuálního náhledu (výchozí třída image-browser-active), který má 3px široký červený okraj. Zašedávač pod galeríí (výchozí třída image-browser-root) je tvořen jedním poloprůhledným obrázkem. Na konci stylopisu je blok stylů pro obrázky v navigaci. Předchozí a další mají stavy tři: neaktivní, aktivní a zvýrazněný při najetí myši. Zavírací tlačítko má stavz aktivní a zvýrazněný. LightBox generuje navíc skryté DIVy s id a className odvozenymi od id/class ovládacích prvků aby bylo možné provést preload obrázků použítých pro hover efekt. Pak je možné ještě nastylovat:

Příklad na jsfiddle.net

Pokud chceme zobrazovat popisky k obrázkům, zvolíme si správnou verzi komponenty description

var opt = {
	...
	components: {
		...
		description: JAK.LightBox.Description.Basic,
		...
	},
	...
};

Příklad galerie s popiskem obrázku na jsfiddle.net

Základní možnosti nastavení LightBoxu

Jak jsme si již ukázali v konfiguračním objektu LightBoxu (druhý parametr konstruktoru) je definice jednotlivých komponent galerie a také jsme si ukázali definici id a třídy. Tento objekt obsahuje další konfigurační vlastnosti a to:

Oproti původní galerii se změnily hlavně velikosti stínů, protože nový LightBox dostal nové stíny a zakulacené rohy. Ukázka je na jsfiddle.net.

Další část konfigurace se týká jednotlivých komponent. Každá komponenta má vlastní konfigurační objekt uložený ve vlastnosti s názvem: <název komponenty>Opt. Jednotlivé komponenty, které obsahuje LightBox mají toto nastavení:

Pokročile nastavený LightBox s nekontinuální navigací, zašedlými tlačítky předchozí / další na první a poslední fotce, rámeček kolem aktivního náhledu zvenčí a přechodem mezi obrázky:

Příklad na jsfiddle.net

Použití prolínačky pro přechod mezi obrázky vyžaduje přilinkování interpolátoru a metronomu.

Horizontální náhledový pás

V následující ukázce stylů a konfigurace je LightBox nastylován tak, aby náhledový pás byl pod hlavním obrázkem. Jediné co musíme nastavit je, že strip má být renderován horizonálně:

Otevřít příklad na jsfiddle.net

Programové rozhranní LightBoxu

Pokud máme vybrané komponenty, nastavené jejich parametry a definované CSS, chceme mít možnost LightBox programově ovládat. LightBox jednak poskytuje veřejné metody, kterými je možné navěsit na odkazy jeho otevření, a také poskytuje metody na jeho otevření, uzavření, nebo přechod na konkrétní obrázek.

Otevřít příklad na jsfiddle.net

LightBox má dále metodu bindElement, která je volnější než, bindAnchors, tedy na předaný element navěsí click událost a druhým parametrem se předá pořadí obrázku, na kterém se má LightBox otevřít. Vytvoříme si tlačítka, která otevřou mapu na 2., 4. a 6. obrázku.

Otevřít příklad na jsfiddle.net

LightBox má dále tyto metody:

Poslední zajímavou metodou, je statická metoda JAK.LightBox.create. Pokud máme na stránce blok s odkazy na velké fotorafie a v odkazu je náhled, můžeme tento blok předat jako parametr této metodě a ta vytvoří instanci LightBoxu bez nutnosti JS objektu s daty o obrázcích.

Otevřít příklad na jsfiddle.net

Vysílané signály LightBoxem

Pokud bychom chtěli reagovat na nastalé události v LightBoxu, můžeme naslouchat na tyto události:

LightBox obsahuje také veřejnou metodu createEvent, kterou využívají komponenty pro vyvolání událostí, které vznikly v komponentě, ale chceme je propagovat pro všechny posluchače LightBoxu. Tuto metodu používají v současné době dvě komponenty:

Vytvoření nového pluginu

LightBox je výjimečný tím, že je možné ho velice jednoduše rozšiřovat o další funkčnost. Buď tím, že podědíme z jedné z výchozích komponent a upravíme její funkčnost, nebo si můžeme vytvořit komponentu vlastní, která rozšiřuje LightBox o chování, které je specifické pro dané použití.

Pozicování galerie na střed okna se zachováním viditelnosti ovládacích prvků

Pokud využijeme pozicování na střed, pomocí komponenty JAK.LightBox.Anchorage.Fixed, a zároveň prohlížíme velké obrázky na malém displayi, může se lehce stát, že ovládací prvky LightBoxu budou nedostupné, zobrazené mimo průzor. Proto si ukážeme napsání nového pozicovače, který bude pozicovat LightBox na střed, ale pokud bude průzor malý, bude ho pozicovat tak, aby byly ovládací prvky viditelné.

Otevřít příklad na jsfiddle.net

Vlastní komponenta zobrazující počet fotografií

Druhou možností rozšiřování LightBoxu je doplnění o novou funkčnost. V Novinkách zobrazujeme počet fotografií v galerii. Tuto funkcionalitu zajišťuje takováto komponenta:

/*-------------pocet fotek---------------*/
JAK.Photos = JAK.ClassMaker.makeClass({
	NAME: 'JAK.Photos',
	VERSION: '1.0',
	CLASS: 'class',
	IMPLEMENT: [JAK.ISignals]
});

/**
  * konstruktor
  */
JAK.Photos.prototype.$constructor = function(owner) {
	this.owner = owner;
	this._render();
};

/**
  * privatni metoda starajici se o vyrenderovani komponenty
  */
JAK.Photos.prototype._render = function() {
	var c = JAK.cel('div', 'image-browser-photo-count');
	var n = this.owner.data.length;
	var text = n > 0 && n < 5 ? 'fotografie' :  'fotografií';
	c.innerHTML = n+' '+text;
	this.owner.dom.content.appendChild(c);
};

Na začátku je třeba vědět, že o nové komponentě LightBoxu dáme vědět pomocí konfiguračního objektu. Do teď jsme používali zabudované komponenty a ty jsme definovali pomocí vlastnosti components. V této vlastnosti může být navíc vlastnost s název others, což je pole vlastních komponent. Je to pole objektů, které vyžaduje metoda JAK.Components::addNewComponent. Přidání do našeho konfiguračního objektu může vypadat takto:

var opt = {
	...
	components: {
		strip: JAK.LightBox.Strip.Scrollable,
		navigation: JAK.LightBox.Navigation.Basic,
		anchorage: JAK.LightBox.Anchorage.Fixed,
		main: JAK.LightBox.Main.CenteredScaled,
		description: JAK.LightBox.Description.Basic,
		transition: JAK.LightBox.Transition.Fade,
		others : [
				{name: 'photos', part: JAK.Photos}
			]
	},
	...
};

Dále v našem kódu nastavujeme DIVu s počtem fotografií třídu image-browser-photo-count, abychom mohli tento box nastylovat:

#lightBox .image-browser-photo-count	{ width: 100px; height: 50px; margin-right: 15px; padding-top: 7px; text-align: center; float: right; color: #999; font-family:Arial, Helvetica, sans-serif; line-height:140%; font-size: 12px;/*napevno protoze je to v tabulce*/ }

Při vytváření LightBoxu, jsou tyto ostatní komponenty renderovány ihned po vestavěných. Parametr předávaný do konstruktoru komponenty je reference na objekt LightBoxu, proto se můžeme v metodě _render odkazovat na this.owner.dom.content, což je DIV, do kterého se renderují všechny komponenty.

Otevřít příklad na jsfiddle.net

Životní cyklus komponent

Pokud podědíme některou z vestavěných komponent, je třeba vědět, kdy jsou vytvořeny, kdy se tvoří obsah a kdy se aktualizuje.

Vestavěné komponenty jsou inicializovány v konstruktoru LightBoxu, kdy jsou vytvořeny jejich instance. Poté je zavolána také jejich metoda render, která vrací DOM strukturu, kteoru LightBox připíná do svého obsahového okna.

Dále je vyslán signál renderDone. Poté jsou vytvořeny ostatní komponenty z pole others (viz výše). Těm není volána metoda render, protože nemusí být vizuální.

Při zobrazení LightBoxu a změně obrázku je volána u všech vestavěných komponent metoda actualizePosition. Ostatní komponenty pokud chtějí reagovat na stav LightBoxu musí naslouchat na příslušné signály.

Destruktor komponenty je volán při destrukci LightBoxu.

SlideShow

Pokud víme jak vytvořit jednoduchou rozširující komponentu a známe životní cyklus, můžeme se pustit do složitější komponenty, která bude umět spustit slideshow obrázků v Lightboxu.

Komponenta bude mít dvě tlačítka pro spuštění a zastavení SlideShow. Komponenta by měla mít možnost zvolit dobu po kterou je zobrazen jeden obrázek a také zda se po zobrazení LightBoxu automaticky slideshow spustí, či až na vyžádání. Také je vhodné mít možnost definovat id a CSS třídy pro jednotlivé prvky.

Konfiguraci do našeho objektu budeme předávat pomocí třetího parametru konstruktoru, který je u komponent vyhrazen pro konfigurační objekt.

Ihned v konstruktoru voláme metodu _render, abychom vyrenderovali ovládací tlačítka. Dále navěsíme posluchače na signály LightBoxu close pro zastavení animace a transitionDone, pro start odpočtu zobrazení dalšího obrázku. Tento signál posloucháme od začátku, pouze pokud je vlastnost autoplay zapnutá.

Další metody jsou navěšeny na tlačítka a tedy ovládají timeout pro zobrazení dalšího obrázku.

Otevřít příklad s komponentou pro slideshow na jsfiddle.net

Předat parametry naší SlideShow můžeme pak takto:

var opt = {
		components: {
			strip: JAK.LightBox.Strip.Scrollable,
			navigation: JAK.LightBox.Navigation.Basic,
			anchorage: JAK.LightBox.Anchorage.Fixed,
			main: JAK.LightBox.Main.CenteredScaled,
			others: [
				{name: 'slideshow', part: JAK.SlideShow, setting: {duration: 5, autoplay: true}}
			]
		}
	};

Renderování galerie a přístup k uživatelům se zrakovým postižením

Aby bylo možné galerie inicializovat a používat ihned, bez nutnosti čekat na načtení celé stránky, využívá Lightbox skrytého prvku, který je umístěn do tagu body na začátek, před veškerý obsah, pro vyrenderování svých částí. V průběhu načítání stránky nelze připínat na konec body, protože ještě není znám. Z toho vyplývá, že tento obsah, až je před normálními uživateli skryt, je viděn zrakově postiženými uživateli, pokud používají čtečky, které nedokáží rozeznat z CSS, že jsou prvky skryty.

Každý LightBox proto generuje neviditelné odkazy pro přeskočení obsahu galerie a obsahu všech galerií tak aby zrakově postižený nemuseli stále procházet obsah galerií i když nejsou zobrazeny. Pokud je galerie pojmenována vlastností galleryName, je tento název renderován do názvu galerie pro zrakově postižené, aby věděli, nejen jakou galerii přeskakují, ale i jaká galerie se jim zobrazila.

Pokud by nebylo vhodné výchozí chování LightBoxu, kdy je jeho kód pro budoucí použití renderován do elementu na začátku body, je možné toto chování změnit. Ve jmeném prostoru JAK.LightBox je statická vlastnost JAK.LightBox.container, do kterého můžeme uložit, před vytvárením instance LightBoxu, referenci na DOM element, do kterého se budou galerie vytvářet. Podmínkou je, že tento element je v době přiřazení znám.

Pokud vytvoření tohoto elementu nenecháte na LightBoxu, ale vytvoříte ho sami, je nutné vzít na sebe i zodpovědnost o jeho skrytí před zraky běžných uživatelů. Proto mu doporučujeme nastavit tyto styly:

.container {
	position:absolute;
	left: -100px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}
	
Požadované knihovny: Volitelné knihovny:

Knihovna interpolator.js je nutná pouze pokud chceme použít animace/prolínání při přechodech mezi jednotlivými prvky galerie.

Stáhnout widget lightbox.