Sådan udvides miniaturer som Google-billeder
Google Images kører et unikt brugergrænseflade med thumbnail previews fra mange forskellige hjemmesider. Ved at klikke på nogen af disse miniaturebilleder udvides skærmen med flere detaljer og et større billede.
Det er et af de bedste billedgalleri funktioner jeg har brugt og nu, Du kan klone det med Gridder.js.
Dette gratis jQuery-plugin følger i fodsporene til Googles fantastiske UX ved at oprette et plugin, der matcher denne effekt. Du kan Skift et fotogalleri til et galleri i Google Images-stil med alle de samme animationer og skærmfunktioner.
Jeg er glædeligt overrasket over den hurtighed og brugervenlighed, der følger med dette plugin. Bare klik på et miniaturebillede viser straks et større skud og animationerne er super rene.
Billederne Indsæt et afsnit for beskrivende tekst hvis du vil tilføje nogle detaljer eller links relateret til billederne. Dette virker specielt godt for simple porteføljesider med det formål at fokusere på billederne.
På toppen af det kan du Træk også indhold via Ajax. Dette lader dig lav dynamiske miniaturebilleder der trækker indhold fra andre websteder eller gennem API'er.
Hvert klik begivenhed tilbyder en tilbagekaldelsesmetode, så du kan endda køre andre plugins eller JavaScript-funktioner sammen med Gridder. Med så mange muligheder, føles det næsten som en hel gridramme!
Siden Gridder kører på jQuery, det kræver den nyeste version som afhængighed. Men det er alt hvad du behøver (sammen med Gridder.js-filen), og med et par linjer HTML kan du få dit netværk til at fungere jævnt.
Du bør tjekke GitHub-siden for fuld installationsvejledning men her er en hurtig forhåndsvisning af, hvordan HTML'en ser ud:
Alt indhold bliver trukket gennem JavaScript, så du kan indlæse stort set alt hvad du vil.
Det er et utroligt alsidigt plugin med muligheder til ændre animationshastigheden, lette, lukke knap stil og rul offset position for når brugeren klikker på et nyt miniaturebillede.
Nybegyndere og pro-udviklere vil finde en masse værdi i dette plugin. Men hvis du stadig ikke er sikker på, om dette er tilfældet, skal du kigge på live Gridder demosiden og spille rundt.
