Highslide JS - Fotogalerie

Zobrazování fotek na webu je naprosto běžnou záležitostí. Jak takovou galerii vytvořit a nastavit - o tom bude tento článek.

Fotogalerie, slideshow a základní ovládací prvky

Rozdělení jednotlivých fotogalerií v rámci stránky

Highslide v základním nastavení načte všechny obrázky, které jsou označeny jako highslide (buď pomocí unobtrusive metody - atribut rel nebo hs.expand) a vytvoří z nich jednu velkou galerii. Mezi jednotlivými fotkami se lze přepínat pomocí šipek na klávesnici, prostě jeden Highslide obrázek „vidí“ na ty další. Pokud chceme fotky rozdělit, mít například skupinu fotek z fotogalerie a fotky z článku zvlášť, můžeme tak učinit pomocí parametru slideshowGroup. Toto nastavení se provádí u příslušných thumnbailů:

  <a href="img.jpg" onclick="return hs.expand(this, { slideshowGroup: 'nazev-skupiny' } )">thumbnail</a>

Totéž můžeme samozřejmě zapsat pomocí proměnné (jednodušší zápis):

  var optGallery = {
    slideshowGroup: 'nazev-skupiny'
  }

  <a href="img.jpg" onclick="return hs.expand(this, optGallery )">thumbnail</a>
  <a href="img2.jpg" onclick="return hs.expand(this, optGallery )">thumbnail2</a>

Hotový příklad dvou fotogalerií, které jsou na sobě nezávislé - při procházení galerie pomocí šipek „nezabloudíme“ z jedné galerie do druhé.

Pokud používáme unobtrusive metodu (tedy metodu, kdy u thumbnailů nepoužijeme onclick, ale atribut rel), lze jednotlivé galerie také nastavit. Mějme galerie gallery1 a gallery2:

  <div class="gallery1">
    <a href="img.jpg" rel="highslide">thumbnail</a>
    <a href="img2.jpg" rel="highslide">thumbnail2</a>
  </div>
  <div class="gallery2">
    <a href="img3.jpg" rel="highslide">thumbnail3</a>
    <a href="img4.jpg" rel="highslide">thumbnail4</a>
  </div> 

Pomocí JavaScriptové funkce onSetClickEvent přiřadíme jednotlivým thumbnailům slideshowGroup a zachováme tím „čistý“ kód. Hotový příklad.

Jestliže u některých obrázků (nebo všech) nespecifikujeme parametr slideshowGroup, chovají se jako samostatná skupina. V praxi to znamená, že můžeme fotografie v článku (v toku textu) nechat bez parametru a fotkám v galerii pod článkem jakýmkoliv způsobem parametr přiřadit. Výsledkem budou dvě oddělené galerie.

Přidání slideshow a ovládacích prvků

Highslide umí z fotogalerie (ze jedné na stránce nebo i ze všech) udělat slideshow. Slideshow automaticky zobrazuje fotky jednu po druhé ve zvoleném časovém intervalu. Navíc umí naprosto jednoduše přidat fotogalerii vestavěné ovládání - pro ovládací prvky má vlastní overlay. Toto vše zajišťuje funkce hs.addSlideshow(). Jejím parametrem je seznam vlastností slideshow. Jednou z vlastností je i definice vrstvy s ovládacími prvky.

• slideshowGroup
  Slideshow lze aktivovat pouze pro určitou slideshowGroup, více takových skupin nebo vynecháním tohoto parametru pro celou stránku nezávisle na slideshowGroup. Hodnotou parametru je pole, jehož prvky jsou jména slideshowGroups: př. ["gallery-1", "gallery-2"].
• interval
  Časový interval (integer) v milisekundách. Čas mezi jednotlivým přepínáním obrázku v případě, že použijeme automatickou slideshow (zapneme Play v ovládacích prvcích slideshow).
• repeat
  True/false. Pokud dojede automatická slideshow na konec, má se vrátit na začátek a zobrazovat fotky znovu od začátku?
• useControls
  True/false. Parametr, který určuje, jestli se má vyrenderovat vrstva (overlay) s ovládáním slideshow.
• fixedControls
  True / false / 'fit'. Pokud je parametr true, zůstávají ovládací prvky při přecházení mezi obrázky na svém místě. Tzn. lze projít galerii s klikáním na šipku doprava bez pohnutí myši. Jediné, co se přizpůsobuje, je obrázek. Nově otevřený obrázek se umístí tak, aby se ovládání nemuselo pohnout. Pokud je parametr false, obrázek se zarovnává podle svého nastavení (align) a ovládací prvky cestují. S nastavenou hodnotou 'fit' se slideshow chová stejně, jako v případě true, ale bere se ohled na to, aby obrázek neutekl z viewportu Prohlížeče.
• overlayOptions
  Definice vlastností ovládacích prvků. Vlastnosti jsou stejné jako v případě hs.registerOverlay(), kromě těchto: overlayId, thumbnailId, slideshowGroup a useOnHtml.
• thumbstrip
  Jiná varianta ovládání a Navigace během slideshow. Všechny thumbnaily dané galerie jsou zkopírovány a umístěny do pruhu thumbnailů (thumbstrip). Tato možnost bude uvedena a ukázána na konci tohoto článku.

Hotový příklad velice jednoduché fotogalerie. Nelíbí se při přecházení mezi fotkami to, že se fotka nejprve zmenší a druhá se zas roztáhne? Je možnost globálně pro celý web nastavit vlastnost hs.transitions. Jednoduchým nastavením lze dosáhnout efektu, při kterém zůstane expander otevřený a vymění se pouze obrázky. Případné nesrovnalosti v rozměrech a pozici obrázku se řeší plynule (tzv. crossfade) - ukázáno na stejném příkladu, pouze dodána vlastnost hs.transitions.

Definice více galerií na stránce

Málokdy asi budeme chtít na jedné stránce dvě různě vypadající fotogalerie, ale i na tento případ Highslide myslí a není problém takový stav připravit. V dalším příkladu jsou dvě galerie, každá má jinou hodnotu parametru slideshowGroup a podle tohoto parametru je k nim připojena příslušna slideShow.

Další zobrazení ovládacích prvků slideshow

Highslide umožňuje alternativní zobrazení ovládacích prvků. Samozřejmě není problém nadefinovat pomocí stylů vlastní ovládání. Následující ukázka definuje dvě galerie. Jedna má ovládání v headeru expandovaného obrázku (používá třídu controls-in-heading). Druhá používá třídu text-controls, která nachází uplatnění v galeriích s fullscreen thumbstripem (níže). Samostatnému použití bez thumbstripu ale nic nebrání.

Thumbstrips (pruh thumbnailů)

Co je to thumbstrip. Thumbstrip je vlastně druh vrstvy (overlay), který je po otevření expanderu naplněn thumbnaily dané galerie. Thumbnaily jsou do této vrstvy zkopírovány z dané stránky. Jelikož se jedná o vrstvu, má stejné vlastnosti, jako ostatní vrstvy (viz. registerOverlay). Navíc má ještě vlastnost mode, ta může nabývat hodnot vertical, horizontal a float. Thumbstrip se pak podle tohoto nastavení vytvoří jako vertikální nebo horizontální pruh, který může být napozicován doleva, doprava, nahoru, dolu a to vzhledem k viewportu, tak i vzhledem k expanderu. Pokud použijeme hodnotu float, thumbnaily se srovnají vedle sebe a v případě nedostatku prostoru se zalomí. Narozdíl od předchozích dvou hodnot, kdy se vygeneruje mininavigace v rámci thumbstripu pro posun mezi fotkami. Jednoduchá definice thumbstripu vypadá asi takto (horizontální, pozice dolu relativně k viewportu):

  hs.addSlideshow({
    slideshowGroup: ["th1"],
    interval: 5000,
    useControls: true,
    fixedControls: 'fit',
    overlayOptions: {
      className: 'text-controls',
      position: 'bottom center',
      relativeTo: 'viewport',
      offsetY: -60
    },
    thumbstrip: {
      position: 'bottom center',
      mode: 'horizontal',
      relativeTo: 'viewport'
    }
  });

Ovládací prvky s třídou text-controls nám vytvoří stejnou podobu ovládání, jako v příkladu výše. Vlastnost offsetY zajistí odsazení od spodního okraje - uvolní se tak místo pro thumbstrip, který je v tomto případě horizontální, umístěný na středu při spodním okraji viewportu. Příklad horizontálního a vertikálního thumbstripu na samostatné stránce (zobrazte si zdroj stránky).

Jeden takový osobní postřeh ohledně velikosti thumbnailů a jejich kopií v thumbstripu. Thumbstrip upravuje velikost duplikátů pomocí stylů. Při použití horizontálního modu thumbstripu je velikost nastavena na 40px výšku a šířka je na auto. Tzn. si ji to dopočítá. Při použití vertikálního modu v default nastavení pouze max-width: 60px; a výška není nijak ošetřena. Highslide počítá s tím, že u thumbnailů ve stránce nejsou uvedeny rozměry. Pokud tomu tak je, duplikované thumbnaily jsou v pořádku. Pokud ale velikost thumbnailů zadaná je, výška duplikovaného thumbnailu si toto nastavení přebírá. Kombinace s max-width = paskvil. Tento neduh jsem vyřešil přidáním tohoto řádku do svých stylů. Jedná se o úpravu, která je analogická k úpravě v případě horizontálního thumbstripu:

	.highslide-thumbstrip-vertical img { height: auto; }

Thumbstrip pozicovaný relativně k expanderu

Pokud pozicujeme thumbstrip k expanderu, ne k viewportu jako v předchozím případě, thumbstrip rozšíří velikost expanderu. V tomto případě je doporučeno použít vlasnost hs.useBox - thumbstrip nám při Navigaci mezi jednotlivými obrázky nebude utíkat pod kurzorem. V tomto případě také není vhodné (možná je to skoro až zbytečné) používat control bar v podobě text-controls. Ideální je návrat k původní podobě kontrolních prvků. Příklad používá toto nastavení:

  var th1 = {
    slideshowGroup: 'th1',
    outlineType: 'glossy-dark',
    wrapperClassName: 'dark',
    useBox: true,
    width: 600,
    height: 400,
    thumbnailId: 'main-thumbnail'
  };

  hs.addSlideshow({
    slideshowGroup: ["th1"],
    interval: 5000,
    useControls: true,
    fixedControls: 'fit',
    overlayOptions: {
      position: 'bottom center',
      hideOnMouseOut: true,
      opacity: 0.6
    },
    thumbstrip: {
      position: 'above',
      mode: 'horizontal',
      relativeTo: 'expander'
    }
  });

Krátké vysvětlení: Všechny thumbnaily s vlastnostmi definovanými pomocí proměnné th1 budou mít černý lesklý okraj, budou se otevírat v boxu o velikosti 600x400px a jsou „schovány“ za thumbnailem s id main-thumbnail. Ten jediný je vidět, zbytek je schovaný pomocí stylů. Thumbstrip je umístěný relativně k expanderu, nad obrázkem a má horizontální podobu. Pokud je thumbnailů více, než se vejde do expanderu, automaticky se vygenerují šipky doleva a doprava, které slouží jako Navigace v rámci thumbstripu - v příkladu ukázáno.

Thumbstrip umístěný vedle obrázků v rámci expanderu

Pokud použijeme při vytváření hodnotu float (vlastnost mode), thumbnaily se srovnají v rámci boxu (hs.useBox) a v případě potřeby se zalomí. Pozicování takového thumbstripu by pak mělo nejlépe směřovat do levého nebo pravého panelu (position: 'leftpanel'). I v tomto nastavení existuje stejný problém, jako v případě vertikálního thumbstripu - a to velikost kopírovaných thumbnailů. Tentokrát se reguluje výška a šířka zůstává neošetřena. Vyřešit lze tímto způsobem:

  .highslide-thumbstrip-float img { height: auto; }

Hotový příklad

Galerie s thumbstripem „vestavěná“ ve stránce

S Highslide jdou dělat doslova psí kusy. Příkladem budiž galerie vestavěná ve stránce. Ve skutečnosti jde o galerii, která je stejná jako všechny ostatní, jen ji po načtení stránky rovnou otevřeme, odstraníme nevhodné ovládací prvky (tlačítko na zavření, maximalizování obrázku), upravíme styly, upravíme default chování různých kliků (klik na obrázek znamená zavřít - potřebujeme vypnout / předělat, je potřeba vypnout přetahování obrázků). Pro lepší přehled doporučuji zdrojový kód tohoto příkladu.

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