Highslide JS - základní kaskádové styly

Základní balík Highslide obsahuje několik předepsaných stylů, některé při vytváření projektu nemusíme použít nebo nám naopak některé můžou chybět. Pojďme si ve stručnosti představit alespoň základ.

Obecné styly + styly pro popup obrázků

.highslide

Toto je třída, kterou přiřadíme ke každému odkazu, který obaluje highslide thumbnail. Můžeme přes ní nastavit okraj, kurzor a další nastavení. Třída se nenastavuje automaticky, je potřeba ji k thumbnailům dopsat/generovat.

.highslide-active-anchor

Automaticky přiřazovaná třída. Přiřadí se k odkazu thumbnailu právě otevřeného obrázku. Přes .highslide-active-anchor img můžeme nastavit odlišný styl pro právě otevřený obrázek. Efektní bývá obrázek schovat (visibility: hidden), případně ho učinit průhledný (opacity: 0.5, v případě IE použít filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)).

.highslide-container

Toto je div, který obsahuje veškeré další vrstvy daného popupu. Můžeme zde nadefinovat společné prvky pro všechny popupy. Nastavení se týká jak obrázků, tak HTML Contentu.

.highslide-image

Expandovaný obrázek může mít vedle výchozího okraje také okraj definovaný pomocí CSS. Můžeme tak udělat obrázek s bílým okrajem, kulatými rohy (známe z předchozích případů), ale navíc můžeme tento okraj rozšířit, třeba na 50px.

.highslide-image-blur

Highslide umí otevřít více obrázků najednou (automaticky v případě, že není definován highslide dimming). Moc pěkná vlastnost, pokud si chceme porovnat dva obrázky. Jeden z nich je vždy aktivní (navrchu), ostatní jsou ve vrstvě pod ním. Tyto kontejnery s obrázky, které nejsou aktvivní, mají třídu .highslide-image-blur.

.highslide-caption

Z názvu třídy je jasné, že určuje vlastnosti popisku fotografie, tedy caption. Pokud popisky nepoužíváme (nebo je používáme jinak - třeba ve formě vlastních vrstev - overlay), nemusíme tyto styly definovat.

.highslide-heading

Stejné jako výše uvedený caption. Fotografie nebo i HTML obsah může mít hlavičku (heading). Jedná se o jakýsi „název“ popup okna. Přes tuto třídu lze nastylovat dle vlastních představ.

.highslide-dimming

Pokud používáme dimming (zatmění obrazovky při zvětšeném detailu expanderu), ve stylech musíme mít nadefinovanou barvu, která se na zatmění použije. Pokud není definována, dimming nefunguje.

.highslide-full-expand

Pokud se expandovaný obrázek nevejde na obrazovku, je zmenšený. K obnovení plné velikosti slouží tlačítko umístěné v pravém spodním rohu obrázku. Díky této třídě můžeme změnit jeho vzhled, polohu a další vlastnosti.

.highslide-loading

Nastavení vlastností loading prvku, který je zobrazený do té doby, než se načte požadovaný obrázek.

.highslide-move

Umožňuje nastavení prvků, které dovolují pohybovat obrázkem po obrazovce.

.highslide-number

V patičce nebo hlavičce může být umístěno počítání fotek. Pomocí této třídy lze nastavit styly pro toto „stránkování“.

.highslide-controls

Použito při slide show galerii. Jedná se o obalovací div, který obsahuje jednotlivé ovládací prvky galerie. Ty mají třídy: .highslide-previous, .highslide-next, .highslide-play, .highslide-pause, .highslide-full-expand, .highslide-close.

.highslide-html

Toto je ekvivalent k .highslide-image. Je zde možnost nastavit okraje htmlExpanderu.

.highslide-html-blur

Ekvivalent k .highslide-image-blur. Tuto třídu dostává expander, který není v popředí (pokud je otevřeno více expanderů). A to i v různé kombinaci HTML a obrázkových expanderů.

.highslide-html-content

Div obalující veškerý HTML obsah uvnitř expanderu - včetně highslide-header a highslide-footer.

.highslide-resize

Element, který je používán pro změnu velikosti HTML expanderu.

.highslide-body

Součást .highslide-HTML-Content. SEM se směřuje samotný obsah, Flash, iframe, AJAX. Více o .highslide-body v některém z budoucích článků o Highslide HTML obsahu.

Možnost přidat libovolnou třídu

Obsah každého expandovaného objektu je obalen vrstvou, která má třídu .highslide-wrapper. K této třídě lze jednoduchým způsobem přiřadit jakoukoliv další třídu (nebo třídy). Přes nastavení vlastností (z minulých článků) je možné použít hs.wrapperClassName.

	// globalní nastavení, takto nevyužitelné
	hs.wrapperClassName = "moje-trida";

	<!-- nastavení přímo u odkazu, případně přes config proměnnou -->
	<a href="img-full.jpg" onclick="return hs.expand(this, { wrapperClassName : 'moje-trida'} )"></a>

Highslide předdefinované custom třídy

Balík Highslide obsahuje již předdefinované styly. A to jak základní definici těch obecných stylů, tak balík custom tříd, které využívá například při vytváření klasických fotogalerií nebo třeba při definici thumbstrip galerie (ukázky v příkladu z prvního článku).

Pojďme si namátkou některé z těchto tříd v rychlosti představit:

• draggable-header
  Upraví vlastnosti default hlavičky pro HTML popup okna. Umožní tažení okna za celou hlavičku a navíc schová default stylování ovládací prvků (přesun, zavření okna) a zobrazí pouze tlačítko na zavření okna v přijatelné podobě. Vše lze samozřejmně pomocí stylů upravit do požadované podoby.
• floating-caption
  Tato třída „vystrčí“ popisek obrázku (caption) opticky mimo obrázek. Doporučeno používat se zapnutou dimmingOpacity. Jen tak lze zaručit, že popisek bude vidět na jakémkoliv místě Prohlížeče. Pokud se použije bez dimming, je možné (a skoro jisté), že nad některými částmi stránky (obrázky, Bannery) nebude popisek vidět (jeho barva splyne s pozadím).
• dark
  Tmavá verze klasického zobrazení obrázku a fotogalerií. V uvedeném příkladu jsou dva obrázky v rámci jedné galerie (group2) a každý má jiné barevné schéma.
• borderless
  V default nastavení mají všechny expandované obrázky (.highslide-image) okraj 2px. V klasické verzi je okraj bílý, pokud je použita wrapperClassName dark, je okraj černý. V tomto příkladě vracím tyto 2px zpět (pro všechny ostatní příklady je okraj nastavený na 0, nehodil se) a ukážeme si na nich třídu borderless. Ta tento okraj odstraní a přizpůsobí podle barevného nastavení i podbarvení caption.
• wide-border
  O 10px širší okraj okolo obrázku (.highslide-image). Při správném pořadí tříd dark a wide-border v highslide.css tato třída respektuje třídu dark. Tedy pokud nastavíme obě třídy, výsledný obrázek bude mít o 10px širší tmavý okraj. Pokud nastavíme pouze wide-border, bude okraj obrázku bílý.
• outer-glow
  Jedno z možných nastavení obrázku při použití outlineType na outer-glow. Doporučené je použití dimmingu. Další možností (dle mého názoru lepší a hezčí) je použítí borderless a floating-caption.
• colored-border
  Nejčastější použití této třídy je tehdy, pokud máme nastavený outlineType na null. Barva okraje je samozřejmě editovatelná v highslide.css.
• no-footer
  Slouží pro HTML expandery. Touto třídou je odstraněn prvek na změnu velikosti expanderu. V příkladu je navíc ukázáno, že jednotlivé třídy lze kombinovat. Ve zdroji stránky je jasně vidět ukázka, kdy je expander otevřen s třídou no-footer a zároveň s třídou draggable-header.

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