Pagrindinis » UI / UX » Įterpti animuotus GIF kaip „Facebook“ su jqGifPreview

    Įterpti animuotus GIF kaip „Facebook“ su jqGifPreview

    „Twitter“ ir „Facebook“ turi daug žmonių bendrai naudoti animuotus GIF kasdien. Jei visa tai bus automatiškai paleista, jie gali būti grėsmingi.

    Abu tinklai su ja susiduria su a paspaudimų peržiūrai funkcija visiems GIF. Tai leidžia vartotojui pasirinkti kokias animacijas jie nori matyti pasirenkant, kada pradėti / sustabdyti animaciją.

    Su jqGifPreview papildinys, jūs galite pateikti tą pačią funkciją į savo svetainę.

    Tai nemokamas jQuery įskiepis veikia visuose puslapyje esančiuose GIF arba gali konkrečiai nukreipti į bet kurį norimą. Tai fantastinis šaltinis, tačiau užtrunka šiek tiek laiko, kol norite sukurti.

    Pristabdytas GIF yra tikrai teisingas vienas animacijos rėmelis, puslapyje.

    Deja, šis įskiepis ne automatiškai traukia statinį vaizdą iš GIF tau. Tačiau tai galite atlikti naudodami PHP arba bet kurią kitą „backend“ kalbą, taigi, su šiek tiek kodo, tai gali būti automatizuota.

    Šis įskiepis naudoja duomenų atributą * išsaugoti GIF vaizdo vietą. Kai naudotojas spustelės vaizdą, jis automatiškai įkeliamas į src atvaizdo atributas ir bus rodomas ekrane.

    Paprastas, efektyvus ir tikrai tvarkingas efektas! Jums tereikia CSS / JS failų šiam papildiniui patraukite tiesiai iš „GitHub“. Ir, žinoma, jūs reikia jQuery kopijos, taip pat.

    Iš čia nustatysite vaizdą taip:

      

    Pagrindinis src atributas turėtų turi statinį vaizdą. Galite sukurti scenarijų, kad jį sukurtumėte, arba galite rankiniu būdu redaguoti ir įkelti statinį vaizdą kiekvienam GIF.

    The duomenų gif atributas turi tikrą animuotą GIF ir jie spustelės, jei jūs nukreipti pagrindinę vaizdo klasę (šiuo atveju tai yra .myImg). Dabar, viskas, ko jums reikia, yra viena „JQuery“ eilutė, kad galėtumėte jį dirbti:

     $ (". myImg"). jqGifPreview (); 

    Tikrai, vienas iš geriausių jQuery įskiepių, kuriuos mačiau šį mėnesį, ir tai gana lengva nustatyti.

    Daugiau sužinosite apsilankę „ „GitHub“ puslapis ir taip pat yra tiesioginis demo peržiūra kuriama kūrėjo svetainėje.