Fotky v hlavní roli, to je webová galerie Simple Scroll 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 :). Cílem bylo mít fotky zobrazené podobně, jako byste je měli v paspartě pověšené na zdi.

Galerii jsem dal veřejně k dispozici na Github. Jestli se vám líbí, můžete si ji jednoduše přidat na svůj web. Návod najdete na ssg.Flor.cz. Je napsaná v Javascriptu a jQuery.

Galerie se jmenuje Simple Scroll Gallery a jak název napovídá, je jednoduchá a skrolovací. Funguje jako prezentace fotografií s minimem rušivých prvků. Návštěvníkovi stačí jen skrolovat kolečkem myši (nebo šipkami) dolů a fotky se mu ukazují jedna za druhou. Tady je ukázková SSG s fotkami z Dolomit a Benátek:

SSG funguje tak, že vyhledá všechny odkazy na stránce, které směřují na obrázek (jpg, png, gif). A z těchto obrázků pak seskládá galerii.  Tzn. na stránce už musíte mít tyhle odkazy vytvořené – obvykle jsou v podobě obrázkových náhledů s odkazem.

SSG výborně spolupracuje s WordPressem a jeho galerií. Náhledy, co vidíte výše, vytvořil WordPress. SSG seskládá galerii z fotek na které náhledy odkazují.

Hlavní výhody Simple Scroll Gallery

Fotky v hlavní roli: SSG umí celoobrazovkový režim, je tak vidět v podstatě jen fotka a pruh s popisem pod ní. Ostatní prvky jsou vizuálně minimalizovány. V prohlížečích s jádrem webkit (Chrome, Opera, Safari) je posuvník laděn do tmavých barev, aby nerušil. Podobně je nenápadný 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í.

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. Hned po načtení této stránky se spustí SSG, z url si vytáhne text za křížkem a fotku zobrazí v galerii. 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 rozcestník na další fotogalerie. Samotný rozcestník si ale musíte nakódovat.

Logo na fotce: SSG umožňuje vložit na fotku vaše logo. Cestu k němu, musíte dopsat do CSS stylů.

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: