Kotisivu » UI / UX » Kuinka laajentaa pikkukuvia kuten Google-kuvia

    Kuinka laajentaa pikkukuvia kuten Google-kuvia

    Google-kuvissa on ainutlaatuinen käyttöliittymä pikkukuvien esikatselut useista eri sivustoista. Napsauttamalla jotakin näistä pikkukuvista laajennetaan näyttöä tarkemmin ja suuremmalla kuvalla.

    Se on yksi parhaista kuvagallerian ominaisuuksista, joita olen käyttänyt ja nyt, voit kloonata sen Gridder.js: llä.

    Tämä ilmainen jQuery-laajennus seuraa Googlen uskomattoman UX: n jalanjälkiä luomalla tämän vaikutuksen vastaavan laajennuksen. Sinä pystyt ota kaikki kuvagalleriat Google-kuvien tyyliin kaikki samanlaiset animaatiot ja näyttöominaisuudet.

    Olen hämmästynyt miellyttävästi tämän pluginin käyttämästä nopeudesta ja helppokäyttöisyydestä. Napsauta mitä tahansa pikkukuvaa näyttää välittömästi suuremman kuvan ja animaatiot ovat erittäin puhtaita.

    Kuvat sisällyttää osio kuvaavasta tekstistä jos haluat lisätä kuvia tai linkkejä, jotka liittyvät kuviin. Tämä toimii erityisen hyvin yksinkertaisilla portfolio-sivustoilla, joiden tavoitteena on keskittyä kuviin.

    Sen lisäksi voit myös vetää sisältöä Ajaxin kautta. Näin voit luoda dynaamisia pikkukuvia jotka vetävät sisältöä muista sivustoista tai sovellusliittymien kautta.

    Jokainen napsautustapahtuma tarjoaa takaisinsoitomenetelmän, joten voit jopa käyttää muita laajennuksia tai JavaScript-toimintoja Gridderin rinnalla. Niin monilla vaihtoehdoilla se tuntuu käytännöllisesti katsoen koko ruudukon kehyksestä!

    Koska Gridder toimii jQueryllä, se edellyttää uusinta versiota riippuvuutena. Mutta kaikki mitä tarvitset (yhdessä Gridder.js-tiedoston kanssa), ja muutaman HTML-rivin avulla voit saada verkkosi sujuvasti.

    Sinun pitäisi tarkistaa GitHub-sivu koko asennusohje mutta tässä on a nopea esikatselu mitä HTML näyttää:

      
    Sisältö menee täällä…

    Kaikki sisältö saa vedon JavaScriptin kautta, joten voit ladata melko paljon mitä haluat.

    Se on uskomattoman monipuolinen laajennus, jossa on vaihtoehtoja muuttaa animaation nopeutta, helpottaa, sulkea painikkeen tyyli ja siirtää siirtymäasentoa kun käyttäjä napsauttaa uutta pikkukuvaa.

    Aloittelija ja pro-kehittäjät löytävät paljon arvoa tässä pluginissa. Kuitenkin, jos et ole vielä varma, onko tämä sinulle, tutustu elävään Gridder-esittelysivulle ja pelaa noin.