Så här utökar du miniatyrbilder som Google-bilder
Google Images kör ett unikt användargränssnitt med thumbnail previews från många olika webbplatser. Genom att klicka på någon av dessa miniatyrer expanderar du skärmen med mer information och en större bild.
Det är ett av de bästa bildgalleri funktionerna jag har använt och nu, du kan klona det med Gridder.js.
Detta gratis jQuery-plugin följer i fotspåren i Googles otroliga UX genom att skapa ett plugin som matchar den här effekten. Du kan vänd ett fotogalleri till ett galleri i Google Images-stil med alla samma animationer och visningsfunktioner.
Jag är positivt överraskad av hastigheten och användarvänligheten som följer med denna plugin. Klicka bara på en miniatyrbild visar omedelbart ett större skott och animationerna är super rena.
Bilderna Ta med en sektion för beskrivande text om du vill lägga till några detaljer eller länkar relaterade till bilderna. Det fungerar särskilt bra för enkla portföljplatser med målet att fokusera på bilderna.
Dessutom kan du Dra också innehåll via Ajax. Detta låter dig skapa dynamiska miniatyrbilder som drar innehåll från andra webbplatser eller via API.
Varje klick händelse erbjuder en återkallningsmetod, så du kan även köra andra plugins eller JavaScript-funktioner vid sidan av Gridder. Med så många alternativ känns det praktiskt som ett helt rutnätverk!
Sedan Gridder körs på jQuery, det kräver den senaste versionen som ett beroende. Men det är allt du behöver (tillsammans med Gridder.js-filen), och med några rader av HTML kan du få ditt nätverk att fungera smidigt.
Du bör kolla in GitHub-sidan för fullständiga installationsanvisningar men här är en snabb förhandsvisning av vad HTML ser ut som:
Allt innehåll får dras genom JavaScript, så du kan ladda ganska mycket vad du vill ha.
Det är ett otroligt mångsidigt plugin med alternativ till ändra animationshastigheten, lätta, stäng knappstilen och rulla offsetpositionen för när användaren klickar på en ny miniatyrbild.
Nybörjare och proutvecklare kommer att hitta mycket värde i det här plugin. Men om du fortfarande inte är säker på om det här är för dig, ta en titt på Live Gridder-demosidan och spela om.
