Kotisivu » UI / UX » Upota animoituja GIF-tiedostoja Like Facebook kanssa jqGifPreview

    Upota animoituja GIF-tiedostoja Like Facebook kanssa jqGifPreview

    Twitterissä ja Facebookissa on paljon ihmisiä GIF-tiedostojen jakaminen päivittäin. Jos nämä kaikki toistetaan automaattisesti, ne voivat olla hirveitä syötteessä.

    Molemmat verkot kiertävät tämän a napsauta esikatselutoimintoa kaikkien GIF: ien osalta. Näin käyttäjä voi valita mitä animaatioita he haluavat nähdä valitsemalla milloin aloittaa / lopettaa animaation.

    Kanssa jqGifPreview-laajennus, voit tuoda saman toiminnon sivustoosi.

    Tämä ilmainen jQuery-laajennus toimii kaikilla GIF-sivuilla sivulla tai voi kohdistaa mihin tahansa. Se on loistava resurssi, mutta se kestää vähän aikaa.

    Pysäytetty GIF on todella vain yksi animaation kehys, näkyy sivulla.

    Valitettavasti tämä laajennus ei vetää automaattisesti staattisen kuvan GIF: stä sinulle. Voit kuitenkin tehdä tämän käyttämällä PHP: tä tai muuta taustakieliä, joten hieman koodilla tämä voidaan automatisoida.

    Tämä laajennus käyttää tietokantatietoa * tallenna GIF-kuvan sijainti. Kun käyttäjä napsauttaa kuvaa, se latautuu automaattisesti src kuvan ominaisuus ja se näkyy näytössä.

    Yksinkertainen, tehokas ja varmasti siisti vaikutus! Tarvitset vain tämän laajennuksen CSS / JS-tiedostot vedä suoraan GitHubista. Ja tietenkin tarvitset kopion jQuerysta, liian.

    Sieltä asetat kuvan näin:

      

    Pää src määritteen pitäisi olla sisältää staattisen kuvan. Voit luoda sen luomaan komentosarjan, tai voit muokata ja ladata manuaalisesti jokaisen GIF: n.

    data-GIF ominaisuus on todellinen animoitu GIF ja he vaihtavat napsautuksella, jos kohdistaa pääkuvaluokkaan (Tässä tapauksessa se on .myImg). Nyt tarvitset vain yhden rivin jQueryä saadaksesi kaiken toimimaan:

     $ ( "MyImg"). JqGifPreview (); 

    Ehdottomasti yksi hienoimmista jQuery-laajennuksista, joita olen nähnyt tässä kuussa, ja se on melko helppo asentaa.

    Voit oppia lisää vierailemalla GitHub-sivu ja siellä on myös a live-esittely kehittäjän verkkosivustolla.