Hoe miniaturen uitvouwen zoals Google Afbeeldingen
Google Afbeeldingen voert een unieke gebruikersinterface uit met thumbnail-voorbeelden van veel verschillende websites. Als u op een van deze miniaturen klikt, wordt het scherm uitgebreid met meer details en een grotere afbeelding.
Het is een van de beste functies voor afbeeldingen die ik heb gebruikt en nu, je kunt het klonen met Gridder.js.
Deze gratis jQuery-invoegtoepassing treedt in de voetsporen van de ongelooflijke UX van Google door een plug-in te maken die overeenkomt met dit effect. Jij kan verander elke fotogalerij in een galerij in Google Afbeeldingen-stijl met dezelfde animaties en display-functies.
Ik ben aangenaam verrast door de snelheid en het gebruiksgemak van deze plug-in. Klik gewoon op een miniatuur geeft onmiddellijk een grotere foto weer en de animaties zijn superschoon.
De afbeeldingen een sectie opnemen voor beschrijvende tekst in het geval dat u enkele details of links wilt toevoegen die verband houden met de foto's. Dit werkt vooral goed voor eenvoudige portfoliosites met een focus op de afbeeldingen.
Bovendien kunt u haal ook content bij Ajax. Hiermee kunt u maak dynamische miniaturen die inhoud ophalen van andere websites of via API's.
Elke klikgebeurtenis biedt een callback-methode, zodat je naast Gridder zelfs andere plug-ins of JavaScript-functies kunt uitvoeren. Met zoveel opties voelt het praktisch als een volledig rasterwerk!
Sinds Gridder werkt op jQuery, het vereist de nieuwste versie als een afhankelijkheid. Maar dat is alles wat u nodig hebt (samen met het bestand Gridder.js) en met een paar regels HTML kunt u uw raster probleemloos laten werken.
Bekijk de GitHub-pagina voor volledige installatie-instructies maar hier is een snelle preview van hoe de HTML eruit ziet:
Alle inhoud wordt door JavaScript getrokken, zodat je vrijwel alles kunt laden wat je maar wilt.
Het is een ongelooflijk veelzijdige plug-in met opties om de animatiesnelheid wijzigen, versnellen, knopstijl sluiten en de positie van de verschuivingspositie verschuiven voor wanneer de gebruiker op een nieuwe miniatuur klikt.
Zowel newbie- als pro-ontwikkelaars zullen veel waarde vinden in deze plug-in. Maar als je nog steeds niet zeker weet of dit iets is, kijk dan eens naar de live Gridder-demopagina en speel wat rond.
