Domača » UI / UX » Kako razširiti sličice, kot je Google Slike

    Kako razširiti sličice, kot je Google Slike

    Google Slike imajo edinstven uporabniški vmesnik predogled sličic iz različnih spletnih mest. Če kliknete katero koli od teh sličic, se zaslon razširi z več podrobnostmi in večjo sliko.

    To je ena najboljših funkcij galerije slik, ki sem jih uporabil in zdaj, lahko ga klonirate z Gridder.js.

    Ta brezplačen vtičnik jQuery sledi korakom Googlovega neverjetnega UX-a z ustvarjanjem dodatka, ki se ujema s tem učinkom. Ti lahko vsako fotogalerijo spremenite v galerijo v slogu Google slik z vsemi animacijami in funkcijami prikaza.

    Prijetno sem presenečen nad hitrostjo in enostavnostjo uporabe, ki jo dobite s tem vtičnikom. Samo kliknite katero koli sličico takoj prikaže večji posnetek in animacije so super čiste.

    Slike vsebujejo razdelek za opisno besedilo v primeru, da želite dodati nekaj podrobnosti ali povezave v zvezi s slikami. To deluje še posebej dobro za preprosta portfeljska spletna mesta s ciljem, da se osredotoči na slike.

    Povrh tega lahko tudi povlecite vsebino prek Ajaxa. To vam omogoča ustvarite dinamične sličice ki vlečejo vsebino z drugih spletnih mest ali prek API-jev.

    Dogodek vsakega klika ponuja način povratnega klica, tako lahko poleg Gridderja zaženete tudi druge vtičnike ali funkcije JavaScript. S tako veliko možnostmi se praktično počuti kot celoten mrežni okvir!

    Od Gridderja teče na jQuery, zahteva najnovejšo različico kot odvisnost. Ampak, to je vse, kar potrebujete (skupaj z datoteko Gridder.js), in z nekaj vrsticami HTML lahko vašo omrežje nemoteno teče.

    Oglejte si stran GitHub za popolna navodila za namestitev ampak tukaj je a hiter predogled kako izgleda HTML:

      
    Vsebina je tu…

    Vse vsebine dobite skozi JavaScript, tako da lahko naložite precej vsega kar želite.

    To je neverjetno vsestranski plugin z možnostmi spremenite hitrost animacije, popuščanje, zaprite slog gumbov in pomaknite odmik od položaja ko uporabnik klikne novo sličico.

    Newbie in pro razvijalci enako bodo našli veliko vrednost v tem plugin. Če pa še niste prepričani, če je to za vas, si oglejte demo stran Gridder v živo in se poigrajte.