Ako rozbaliť náhľady ako Obrázky Google
Obrázky Google majú jedinečné používateľské rozhranie náhľadov miniatúr z mnohých rôznych webových stránok. Kliknutím na ktorýkoľvek z týchto miniatúr rozširujete obrazovku o ďalšie podrobnosti a väčší obrázok.
Je to jedna z najlepších funkcií obrázkových galérií, ktoré som použil a teraz, môžete ho klonovať pomocou Gridder.js.
Tento bezplatný doplnok jQuery nasleduje v šľapajach neuveriteľného UX spoločnosti Google vytvorením doplnku, ktorý zodpovedá tomuto efektu. Môžeš premeniť fotografickú galériu na Galériu štýlov Google so všetkými rovnakými animáciami a funkciami zobrazenia.
Som príjemne prekvapený rýchlosťou a jednoduchosťou používania, ktoré prichádza s týmto doplnkom. Stačí kliknúť na ľubovoľnú miniatúru okamžite zobrazí väčší záber a animácie sú super čisté.
Obrázky obsahovať oddiel popisného textu v prípade, že chcete pridať nejaké detaily alebo odkazy týkajúce sa obrázkov. Toto funguje obzvlášť dobre pre jednoduché portfóliové stránky s cieľom sústrediť sa na obrázky.
Okrem toho môžete tiež vytiahnuť obsah cez Ajax. To vám umožní vytvárať dynamické miniatúry ktoré vyťahujú obsah z iných webových stránok alebo prostredníctvom rozhraní API.
Každá udalosť kliknutia ponúka metódu spätného volania, takže môžete dokonca spustiť ďalšie doplnky alebo funkcie JavaScript spolu s Gridder. S toľkými možnosťami sa prakticky cíti ako celá sieťová štruktúra!
Od Gridder beží na jQuery, vyžaduje najnovšiu verziu ako závislosť. Ale to je všetko, čo potrebujete (spolu s súborom Gridder.js) a pomocou niekoľkých riadkov kódu HTML môžete mať mriežku bežať hladko.
Mali by ste sa pozrieť na stránku GitHub pre úplné pokyny na nastavenie ale tu je a rýchly náhľad čo HTML vyzerá:
Celý obsah sa dostane cez JavaScript, takže môžete načítať skoro všetko, čo chcete.
Je to neuveriteľne všestranný doplnok s možnosťami zmeniť rýchlosť animácie, uvoľnenie, zatvárať štýl tlačidla a posunúť pozíciu posunu keď používateľ klikne na novú miniatúru.
Nováčikovia a vývojári pre takisto nájdu veľa pluginov. Napriek tomu, ak si stále nie ste istí, či je to pre vás, pozrite sa na demo stránky live Gridder a hrajte sa.
