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 je k dispozici zdarma (viz dále). 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.
Tady je ukázková galerie s fotkami z Dolomit a Benátek:
Story Show Gallery je k dispozici zdarma, můžete si ji jednoduše přidat na svůj web. Pokud máte WordPress web, tak se dá SSG nainstalovat přímo z administrace jako jakýkoliv jiný plugin. Hlavní menu > Pluginy > Instalace pluginů a do vyhledávacího políčka napište Story Show Gallery. Pak už stačí jen kliknout na tlačítko instalovat.
Story Show Galerie se dá přidat na jakýkoliv web, stačí tři řádky kódu. Je k dispozici jako jQuery knihovna či React komponenta.
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í.
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.
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.
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ů.
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.
16. 8. 2018 at 8:28
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.
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.
21. 1. 2020 at 10:14
Nebylo by špatné, kdyby se z fotky načetly případné GPS souřadnice a pokud jsou přítomny, tak se v celoobrazovkovém zobrazení fotky vedle jejího popisu objevila i ikona pro otevření mapy s načtenou polohou.
26. 1. 2020 at 21:13
Díky za komentář. Z mého pohledu má taková funkce příliš malý poměr cena/výkon. Implementovat by ji bylo docela náročné a myslím, že přínos by nijak velký nebyl. Svá tajná místa fotografové neprozradí a ty všeobecně známá není problém si dohledat. Když už zobrazovat lokaci, tak si myslím, že má větší vypovídací hodnotu dát všechny fotky na jednu mapu. A na to je spousta jiných specializovaných nástrojů.
23. 8. 2021 at 19:03
Tak Story Show Galerie už umí i ty GPS souřadnice, svezly se se zobrazením EXIFu. Po rozkliknutí základních údajů v popisu fotky se zobrazí podrobný EXIF výpis i s GPS souřadnicemi. Zobrazí se jen číselně, ale odkaz vede na plnohodnotnou mapu – Google Maps.