Jak rozbalit miniatury jako Obrázky Google
Obrázky Google mají jedinečné uživatelské rozhraní náhledy z mnoha různých webových stránek. Kliknutím na některý z těchto náhledů se obrazovka rozšíří o další podrobnosti a větší obrázek.
Je to jedna z nejlepších funkcí galerie obrázků, kterou jsem použil a nyní, můžete jej klonovat pomocí programu Gridder.js.
Tento bezplatný plugin jQuery následuje ve stopách neuvěřitelného UX společnosti Google vytvořením pluginu, který odpovídá tomuto efektu. Můžeš přeměnit každou fotogalerii na galerii ve stylu Google Images se všemi stejnými animacemi a funkcemi zobrazení.
Jsem příjemně překvapen rychlostí a snadností použití, které tento plugin obsahuje. Stačí kliknout na miniaturu okamžitě zobrazí větší záběr a animace jsou super čisté.
Obrazy obsahovat popisný text v případě, že chcete přidat nějaké podrobnosti nebo odkazy související s obrázky. To se hodí zejména pro jednoduché portfóliové stránky s cílem zaměřit se na obrázky.
Kromě toho můžete také stáhnout obsah přes Ajax. To vám umožní vytvářet dynamické miniatury které stahují obsah z jiných webových stránek nebo prostřednictvím rozhraní API.
Každá událost kliknutí nabízí metodu zpětného volání, takže můžete vedle Gridderu spouštět i další pluginy nebo funkce JavaScriptu. S tolika možnostmi se prakticky cítí jako celá mřížka!
Od Gridder běží na jQuery, vyžaduje závislost na nejnovější verzi. Ale to je vše, co potřebujete (spolu se souborem Gridder.js), a s několika řádky HTML, můžete mít svou mřížku běží hladce.
Měli byste se podívat na stránku GitHub úplné pokyny k nastavení ale tady je rychlý náhled jak vypadá HTML:
Veškerý obsah dostane přes JavaScript, takže můžete načíst téměř cokoliv chcete.
Je to neuvěřitelně univerzální plugin s možnostmi změnit rychlost animace, uvolnění, zavřít styl tlačítka a polohu posunutí posunu pokud uživatel klepne na novou miniaturu.
Nováček i pro vývojáře najdou v tomto pluginu spoustu hodnoty. Pokud si ale stále nejste jisti, zda je to pro vás, podívejte se na živou demoverzi Gridderu a zahrajte si.
