Highslide JS - ovládací prvky expanderu, vrstvy

U obrázků někdy můžeme chtít zobrazit nějaký druh „Navigace“. Popíšeme si, jak ovládací prvky k expanderu připojit, a ukážeme si, jak vytvořit libovolnou vrstvu přes obrázek (overlay).

Highslide vrstva nebo-li overlay, co je to? Lidově řečeno něco, co je připojeno k expanderu. My už dvě takové vrstvy známe. Jedná se o caption a heading. Jsou to vrstvy, které si automaticky vytváří Highslide, pokud k tomu najde podnět (existující element highslide-caption hned za thumbnailem, připojené vlastnosti captionText, headingText nebo třeba captionId a headingId. Tyto dvě vrstvy mají narozdíl od těch, které si budem „ručně“ vytvářet, vlastní způsob nastavení vlastností. O tom více na konci článku.

Jedna poznámka ještě před začátkem tvorby vrstev. Vrstvy se ve výchozím stavu nevykreslují pro HTML obsah highslide. Pouze pro obrázky a celé fotogalerie. Zobrazování pro HTML lze ovšem zapnout - o tom si řekneme dále, při probírání vlastností vrstvy.

Jak vytvořit highslide vrstvu (overlay)

Existují dvě možnosti. Jedna (hs.registerOverlay) se primárně používá v případě, kdy je prvek stejný pro všechny otevřené obrázky (např. tlačítko zavřít, další fotka, předchozí fotka). Druhá možnost, createOverlay, se používá v případech, kdy nemůžeme určit, co bude obsahem vrstvy. Tedy v případě, kdy chceme ve vrstvě zobrazovat dynamická data. Ale postupně:

Vytvoření vrstvy pomocí hs.registerOverlay

Zápis této funkce vypadá asi takto:

if (hs.registerOverlay)
	hs.registerOverlay({
	  vlastnost : 'hodnota',
	  vlastnost2 : 'hodnota2'
	});
} 

Seznam a popis vlastností, které lze při použití této funkce nastavit:

• className
  Výsledná vrstva dostane tuto třídu. Může se použít a nemusí. Třídu můžeme nastavit třeba samotnému prvku v rámci vlastnosti HTML, více dále...
• fade
  Použití fade při otevření obrázku. Volba 0/false znamená ne, vrstva se instantně zobrazí. Volba 1/true fading zapne a volba 2 ho zapne pouze ve všech Prohlížečích kromě Internet Exploreru. IE má problém v případě, že použijeme poloprůhledný PNG obrázek.
• hideOnMouseOut
  false/true - volba, zda se má prvek schovat, pokud kurzorem opustíme expandovaný obrázek
• HTML
  Zdrojový kód vrstvy. Pokud použijeme definici HTML kódu zde, nemusíme použít následující vlastnost - overlayId.
• overlayId
  Tuto vlastnost použijeme, pokud máme zdrojový kód vrstvy umístěný v nějakém divu přímo ve stránce.
• offsetX, offsetY
  Hodnotou je číslo, může být i záporné. Jedná se o posun v X a Y ose o tolik pixelů, kolik udává číslo.
• opacity
  Desetinné číslo mezi 0-1. Jedná se o průhlednost vrstvy, 0 = úplná průhlednost (tzn neviditelnost), 1 = neprůhledná vrstva.
• position
  Hodnotou je řetězec, který určuje pozici vrstvy vzhledem k expanderu. Hodnotou jsou dvě slova. První může nabývat hodnot above, top, middle, bottom nebo below. Druhé nabývá hodnot left, right nebo center. Další možností jsou jednoslovné výrazy - rightpanel a leftpanel - tyto možnosti si ukážeme v příkladu s captionOverlay funkcí.
• relativeTo
  Tato vlastnost určuje, vůči čemu má být vrstva pozicována. Defaultní hodnotou je expander, druhou možností je ještě viewport, což je zobrazovací část okna Prohlížeče. Pokud je vrstva pozicovaná vůči viewportu, zůstává na své pozici i při scrollování (position: fixed).
• slideshowGroup
  Jméno slideshowGroup, pro kterou se má daná vrstva použít. SlideshowGroups budou vysvětleny a ukázány v dalším pokračování tohoto seriálu.
• thumbnailId
  To samé co slideshowGroup, jen se to týká jednotlivých thumbnailů. Hodnotou je id thubmnailu.
• width
  Šířka vrstvy v px nebo v % ('100px' nebo '100%'). Pokud je position vrstvy nastavený na leftpanel nebo rightpanel, je vyžadována šířka v px, jinak se vezme v potaz default, což je 200px.
• useOnHtml
  Ve výchozím nastavení se vrstvy zobrazují pouze pro obrázky. Pokud chceme použít vrstvy i pro HTML Content (viz další články), zapneme to touto volbou

Tlačítko na zavírání fotky

Jednoduchým příkladem může být třeba tlačítko na zavírání fotky. V následující ukázce máme definované dvě vrstvy, každá pro jednu fotku (přes thumbnailId).

Jednoduchá navigace mezi fotkami pomocí šipek

Přes vlastní vrstvy si můžeme přidat k obrázkům třeba i ovládací šipky na další a předchozí obrázek. Jedná se prakticky o stejný postup jako v předchozím příkladu. Je vygenerována vrstva, která má v HTML atributu pouze jiný kód:

	//html kod vrstvy 
	var hsImgControlBar = '<a href="#" onclick="return hs.previous(this)" title="Předchozí" class="highslide-previous"><span>Předchozí</span></a>';
	hsImgControlBar += '<a href="#" onclick="return hs.next(this)" title="Další" class="highslide-next"><span>Další</span></a>';
	
	// vytvoreni vrstvy
	if (hs.registerOverlay) {
		hs.registerOverlay({
		  className: 'controlbar',
		  fade: 2, 
		  hideOnMouseOut: true,
		  html: hsImgControlBar,
		  position: 'middle center',
		  width: '100%'
		});
	}

A v hlavních stylech mám pro třídu controlbar a odkazy highslide-previous a highslide-next nadefinovány dodatečné styly:

	.controlbar a {
	  display: block;
	  width: 36px;
	  height: 39px;
	  background: 0px 0px no-repeat;
	}
	.controlbar a span {
	 display: none;
	}
	.controlbar a.highslide-previous {
	  float: left;
	  background-image: url("../img/highslide-left.gif");
	}
	.controlbar a.highslide-next {
	  float: rightright; 
	  background-image: url("../img/highslide-right.gif");
	}

Hotový příklad s jednoduchou Navigací mezi obrázky.

Vytvoření dynamické vrstvy pomocí createOverlay

Dynamickou vrstvu potřebujeme vytvořit až tehdy, kdy klikneme na thumbnail. Otevření Highslide expanderu vyhazuje mnoho událostí (eventů), jednu z nich použijeme pro vytvoření dynamické vrstvy. Bude jí událost onBeforeExpand. Nejlepší vysvětlování bude asi na příkladu.

	hs.Expander.prototype.onBeforeExpand = function (sender) {
	  // vytvoření elementu vrstvy a naplnění obsahem
	  var photoTitle = document.createElement('div');
	  photoTitle.className = "highslide-photo-title";
	  if(sender.thumb.alt != ""){
	    photoTitle.innerHTML = sender.thumb.alt + "<br />";
	  }
	  photoTitle.innerHTML += '<a href="'+sender.a.href+'">Odkaz na samotný obrázek</a>';
	  // samotné přiřazení vrstvy
	  sender.createOverlay( { overlayId: photoTitle, position: "bottom left", hideOnMouseOut: true, opacity: 1, width: '100%' } );
	}

Událost onBeforeExpand je vyhozena v době, kdy jsou hotové výpočty velikosti a pozice expanderu. V rámci této události vytvoříme element div, naplníme ho altem thumbnailu (pokud není prázdný) a přidáme odkaz na obrázek. URL obrázku nám předá odkaz thumbnailu, na který jsme klikli.

Funkce createOverlay má podobné parametry, jako výše popsaná funkce registerOverlay. Jen jich je míň - fade, overlayId, position, hideOnMouseOut a opacity.

K tomuto příkladu jsou ještě v hlavních stylech dopsány tyto definice:

 

	.highslide-photo-title {
	  background: #ffffff;
	  padding: 12px 18px;
	  font-size: 120%;
	  font-weight: bold;
	}
	.highslide-photo-title br {
	  display: none;
	}
	.highslide-photo-title a {
	  display: block;
	  padding: 4px 0px;
	  font-size: 70%;
	  font-weight: normal;
	  outline: 0px;
	}
	.highslide-photo-title a:hover {
	  text-decoration: none;
	}

Dynamická navigace mezi fotkami

V jednom z předchozích příkladů jsme si ukázali, jak vytvořit jednoduché šipky jako Navigaci mezi obrázky. Výše uvedený způsob má jeden neduh. Šipky jsou vytvořeny obě, na každém obrázku. A to i v případě, že neexistuje žádný další nebo předchozí obrázek. Highslide se zachová korektně, při pokusu otevřít další obrázek, který neexistuje, jen zavře expander a chybu nevyhodí, ale z uživatelského hlediska by bylo víc „user-friendly“, aby se u obrázku objevovaly šipky jen když mají důvod. Pomocí funkce createOverlay toho můžeme dosáhnout poměrně snadno.

Nadefinujeme si zvlášť kód pro levou a pravou šipku:¨

	var hsImgControlBarLeftArrow = '<a href="#" onclick="return hs.previous(this)" title="Předchozí" class="highslide-previous"><span>Předchozí</span></a>';
	var hsImgControlBarRightArrow = '<a href="#" onclick="return hs.next(this)" title="Další" class="highslide-next"><span>Další</span></a>';

Poté v rámci funkce createOverlay provedeme lehkou kontrolu, zda pro právě otevřený obrázek existuje následující (případně předchozí) a podle toho vložíme do vrstvy danou šipku.

	hs.Expander.prototype.onBeforeExpand = function (sender) {
	  // vytvoření elementu vrstvy a naplnění obsahem
	  var controlbar = document.createElement('div');
	  controlbar.className = "controlbar";
	  controlbar.innerHTML = "";

	  // kontrola, zda existuje předchozí obrázek
	  if(sender.getAdjacentAnchor(-1)){
	    controlbar.innerHTML = hsImgControlBarLeftArrow;
	  }
	  // kontrola, zda existuje následující obrázek 
	  if(sender.getAdjacentAnchor(1)){
	    controlbar.innerHTML += hsImgControlBarRightArrow;
	  }
	  // samotné přiřazení vrstvy
	  if (controlbar.innerHTML != "") {
	    sender.createOverlay( { overlayId: controlbar, position: "middle center", hideOnMouseOut: false, opacity: 1, width: '100%' } );
	  }
	}

Funkce getAdjacentAnchor() bere v potaz rozdělení obrázků do jednotlivých fotogalerií, pokud tedy dojde na konec jedné fotogalerie, šipku na další obrázek nezobrazí i přesto, že „za ním“ následuje další fotka. Výsledek je zpracován v samostatném příkladu.

Caption a heading jsou také vrstvy

Jak jsem již předeslal na začátku článku, caption a heading jsou také druhy vrstvy. Od verze Highslide 4.0 se dají nastavovat podobnými vlastnostmi, které nastavujeme při vytváření vlastních vrstev. K tomu slouží proměnné captionOverlay a headingOverlay.

K příkladům na captionOverlay a headingOverlay asi není moc co dodávat.

Seriál

• Highslide JS - úvod
• Highslide JS - práce s obrázky
• Highslide JS - základní kaskádové styly
• Highslide JS - ovládací prvky expanderu, vrstvy
• Highslide JS - Fotogalerie
• Highslide JS - Highslide JS - HTML expander
• Highslide JS - Přizpůsobení Highslide pomocí custom proměnných

Další články autora:

2