Slik utvider du miniatyrer som Google-bilder
Google Images kjører et unikt brukergrensesnitt med Forhåndsvisning av miniatyrbilder fra mange forskjellige nettsteder. Ved å klikke på noen av disse miniatyrbildene, utvides skjermen med flere detaljer og et større bilde.
Det er et av de beste bildgalleri-funksjonene jeg har brukt og nå, Du kan klone den med Gridder.js.
Dette gratis jQuery-pluginet følger i fotsporene til Googles utrolige UX ved å lage et plugin som samsvarer med denne effekten. Du kan slå et fotogalleri til et galleri i Google Bilder-stil med alle de samme animasjonene og skjermfunksjonene.
Jeg er hyggelig overrasket over hastigheten og brukervennligheten som følger med denne plugin. Bare klikk på et hvilket som helst miniatyrbilde viser umiddelbart et større bilde og animasjonene er super rene.
Bildene Ta med en seksjon for beskrivende tekst i tilfelle du vil legge til noen detaljer eller lenker relatert til bildene. Dette fungerer spesielt godt for enkle porteføljesider med et mål å fokusere på bildene.
På toppen av det kan du også trekk innhold via Ajax. Dette lar deg Lag dynamiske miniatyrbilder som trekker innhold fra andre nettsteder eller gjennom APIer.
Hvert klikk-arrangement tilbyr en tilbakeringingsmetode, så du kan til og med kjøre andre plugins eller JavaScript-funksjoner ved siden av Gridder. Med så mange alternativer, føles det praktisk talt som et helt gridramme!
Siden Gridder kjører på jQuery, det krever den nyeste versjonen som en avhengighet. Men det er alt du trenger (sammen med Gridder.js-filen), og med noen få linjer med HTML, kan du få rutenettet til å løpe jevnt.
Du bør sjekke ut GitHub siden for full oppsett instruksjoner men her er en rask forhåndsvisning av hvordan HTML-en ser ut:
Alt innhold blir trukket gjennom JavaScript, slik at du kan laste stort sett alt du vil ha.
Det er en utrolig allsidig plugin med alternativer til Endre animasjonshastigheten, lette, lukk knappestilen og bla forskyvningsposisjon for når brukeren klikker på et nytt miniatyrbilde.
Nybegynner- og pro-utviklere vil finne mye verdi i dette pluginet. Likevel, hvis du fortsatt ikke er sikker på om dette er for deg, ta en titt på Live Gridder demo siden og spill av.
