Mājas lapa » UI / UX » Kā paplašināt sīktēlus, piemēram, Google attēlus

    Kā paplašināt sīktēlus, piemēram, Google attēlus

    Google attēliem ir unikāls lietotāja interfeiss ar sīktēlu priekšskatījumi no daudzām dažādām vietnēm. Noklikšķinot uz jebkura no šiem sīktēliem, ekrāns tiek papildināts ar sīkāku informāciju un lielāku attēlu.

    Tā ir viena no labākajām attēla galerijas funkcijām, ko esmu izmantojis un tagad, jūs varat to klonēt ar Gridder.js.

    Šis bezmaksas jQuery spraudnis seko Google neticamā UX pēdām, izveidojot spraudni, kas atbilst šim efektam. Jūs varat pārvērst jebkuru foto galeriju Google attēlu stila galerijā ar visām tām pašām animācijām un displeja funkcijām.

    Es esmu patīkami pārsteigts par šī spraudņa ātrumu un lietošanas ērtumu. Vienkārši noklikšķinot uz jebkura sīktēla uzreiz parādās lielāks kadrs un animācijas ir super tīras.

    Attēli iekļaut sadaļu aprakstošajam tekstam ja vēlaties pievienot dažas detaļas vai saites, kas saistītas ar attēliem. Tas īpaši labi darbojas vienkāršām portfeļa vietnēm ar mērķi koncentrēties uz attēliem.

    Turklāt jūs varat arī velciet saturu, izmantojot Ajax. Tas ļauj jums izveidot dinamiskus sīktēlus kas velk saturu no citām vietnēm vai izmantojot API.

    Katrs klikšķa notikums piedāvā atzvanīšanas metodi, lai jūs varētu pat palaist citus plugins vai JavaScript funkcijas kopā ar Gridder. Ar tik daudzām iespējām tā praktiski jūtas kā visa tīkla struktūra!

    Kopš Griddera darbojas uz jQuery, tai ir nepieciešama jaunākā versija kā atkarība. Bet tas ir viss, kas jums nepieciešams (kopā ar failu Gridder.js), un ar dažām HTML rindām, jūs varat izveidot savu režģi nevainojami.

    Jums vajadzētu apskatīt GitHub lapu pilnīgas uzstādīšanas instrukcijas bet šeit ir a ātra priekšskatīšana kā HTML izskatās:

      
    Saturs šeit ...

    Viss saturs izpaužas caur JavaScript, lai jūs varētu ielādēt diezgan daudz, ko vēlaties.

    Tas ir neticami daudzpusīgs spraudnis ar iespējām mainiet animācijas ātrumu, atvieglojiet, aizveriet pogas stilu un ritiniet nobīdes pozīciju par to, kad lietotājs noklikšķina uz jauna sīktēla.

    Newbie un pro izstrādātāji atradīs lielu vērtību šajā spraudnī. Tomēr, ja jūs joprojām neesat pārliecināts, vai tas ir jums, apskatiet dzīvo Gridder demo lapu un spēlējiet apkārt.