Fotky v hlavní roli, to je webová galerie Story Show Gallery

Protože už jsem delší dobu nebyl spokojený s Lightbox galerií, co jsem měl tady na blogu, rozhodl jsem se naprogramovat si vlastní galerii. Přesně podle gusta :).

Jmenuje se Story Show Gallery a jak název napovídá, je stavěná na ukazování foto příběhů. Divákovi stačí jen skrolovat kolečkem myši (šipkami, dotykem) a fotky se ukazují jedna za druhou v celo-obrazovkovém režimu a bez rušivých prvků.  Pro popisek je dostatek místa buď pod fotkou nebo vedle fotky, tak aby bylo co nejlépe využito místo na obrazovce.

Galerie je k dispozici zdarma, můžete si ji jednoduše přidat na svůj web. Buď jako WordPress plugin nebo jako jQuery knihovnu.

Tady je ukázková galerie s fotkami z Dolomit a Benátek:

Hlavní výhody Story Show Gallery

Fotky v hlavní roli: SSG umí celo-obrazovkový režim, je tak vidět v podstatě jen fotka a popisek, kolem fotky nejsou žádné rušivé šipky či ikony.Posuvník je laděn do tmavých barev, aby nerušil. Podobně nenápadný je i kurzor myši.

Responzivní design: SSG funguje na velké obrazovce stejně jako na malém displeji mobilu. V horizontálním i vertikálním natočení.

Story Show Gallery porovnává velikost obrazovky a fotky a podle toho umístí popisek fotky do ideální pozice.

SSG porovnává velikost obrazovky a fotky a podle toho umístí popisek fotky do ideální pozice.

Google Analytics:  SSG měří zobrazení jednotlivých fotek. V Google Analytics pak vidíte, kolikrát byla fotka zobrazena a kolik času nad ní návštěvníci průměrně strávili.

google-analytics

Několik možností ovládání: Fotky se dají procházet jak kolečkem myši, tak klávesovými šipkami. Na dotykové obrazovce stačí ťuknout do spodní či horní části fotky pro posun na další či předchozí fotku. Galerie automaticky roluje z fotky na fotku, pro rychlý přesun mezi fotkami se dá použít klasicky posuvník.

Odkaz do galerie: Lze odkázat přímo na fotku v galerii. To se dělá pomocí křížku za webovou adresou – např. www.Flor.cz/blog/urbex-ostrava-a-foceni-modelek-v-dole-michal/#na-haku. Za křížkem nemusí být kompletní název fotky, galerie zobrazí první fotku, jejíž název obsahuje text za křížkem.

deep-linking

Rozcestník za galerií: Za poslední fotku v galerii lze načíst HTML rozcestník na další fotogalerie. Součástí galerie je vzorový rozcestník, ten stačí upravit – přepsat názvy a adresy obrázků.

Vodoznak: SSG umožňuje vložit na fotku vodoznak či logo. Cestu k němu je potřeba dopsat do CSS stylů.

watermark

Ochrana fotky před kopírováním pomocí pravého tlačítka (kontextového menu).

V komentářích uvítám zpětnou vazbu, či nápady na vylepšení SSG.

2 Comments

  1. Zajímavá myšlenka. Ještě bych přidal pohyb mezi fotkami pomocí Page Up/Page Down, případně i mezerníkem na další fotku. Na webu je to standard a vertikální scrollování k tomu svádí.

    Když z fotky posuvníkem nascrolluji trochu nahoru, tak třeba do čtvrtiny předchozí fotky, tak se kolečko chová divně – jak nahoru, tak dolu mi přeskočí jednu fotku.

  2. Roman Flössler

    16. 8. 2018 at 23:30

    Díky za komentář. To je dobrý nápad s těmi dalšími klávesami.

    To přeskočení je dané tím, že i když je vidět kus předchozí fotky, tak aktuální fotka je pořád ta, které je vidět větší část. No a kolečkem se přeskakuje na další fotku, takže to přeskočí tu aktuální. Ale jo, působí to divně, zkusím se na to podívat.

Napsat komentář - uvítám váš názor

Váš email nebude publikován.

*

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Fotogalerie: