Kaip išplėsti miniatiūras kaip „Google“ vaizdai
„Google“ vaizduose yra unikali vartotojo sąsaja su miniatiūros peržiūra iš daugelio skirtingų svetainių. Paspaudus bet kurią iš šių miniatiūrų, ekranas išsiskiria daugiau detalių ir didesnio vaizdo.
Tai viena iš geriausių nuotraukų galerijos funkcijų, kurias naudoju ir dabar, galite jį klonuoti su „Gridder.js“.
Šis nemokamas jQuery įskiepis seka neįtikėtiną „Google“ UX pėdsaką, sukuriant šį efektą atitinkantį papildinį. Tu gali įjungti bet kurią nuotraukų galeriją į „Google“ vaizdų stiliaus galeriją su ta pačia animacija ir ekrano funkcijomis.
Aš maloniai nustebęs dėl šio įskiepio pateikimo greičio ir paprastumo. Tiesiog spustelėkite bet kurią miniatiūrą iš karto rodomas didesnis fotografavimas ir animacijos yra super švarios.
Vaizdai įtraukti aprašomojo teksto skyrių tuo atveju, jei norite pridėti kai kurias detales ar nuorodas, susijusias su nuotraukomis. Tai ypač gerai tinka paprastoms portfelio svetainėms, siekiant sutelkti dėmesį į vaizdus.
Be to, galite taip pat traukite turinį per „Ajax“. Tai leidžia jums kurti dinamines miniatiūras kad ištrauktų turinį iš kitų svetainių ar API.
Kiekvienas paspaudimo įvykis siūlo atgalinio ryšio metodą, todėl greta „Gridder“ galite paleisti ir kitus papildinius ar „JavaScript“ funkcijas. Su tiek daug galimybių, ji praktiškai jaučiasi kaip visa tinklelio sistema!
Nuo Gridder veikia „jQuery“, ji reikalauja naujausios versijos kaip priklausomybės. Bet tai viskas, ko jums reikia (kartu su „Gridder.js“ failu), ir su keliomis HTML eilutėmis, jūs galite turėti tinklelį sklandžiai.
Turėtumėte patikrinti „GitHub“ puslapį visas sąrankos instrukcijas bet čia yra a greita peržiūra kaip atrodo HTML:
Visas turinys pasirodo „JavaScript“, todėl galite įkelti beveik viską, ko norite.
Tai neįtikėtinai universalus įskiepis su parinktimis keisti animacijos greitį, palengvinti, uždaryti mygtuko stilių ir slinkties poslinkio padėtį kai vartotojas spusteli naują miniatiūrą.
Naujieji ir profesionalūs kūrėjai taip pat ras daug vertę šiame papildinyje. Tačiau, jei vis dar nežinote, ar tai jums reikia, pažiūrėkite į „Live Gridder“ demonstracinį puslapį ir žaisti.
