Pagina principala » UI / UX » Încărcați GIF-uri animate Ca Facebook cu jqGifPreview

    Încărcați GIF-uri animate Ca Facebook cu jqGifPreview

    Twitter și Facebook au mulți oameni să partajați fișiere GIF animate zilnic. În cazul în care toate acestea sunt jucate automat, acestea ar putea fi înfricoșătoare într-un feed.

    Ambele rețele se înțeleg prin acest lucru caracteristică clic-pentru-previzualizare pentru toate GIF-urile. Aceasta permite utilizatorului să aleagă ce animații doresc să vadă prin alegerea momentului de pornire / oprire a animației.

    Cu pluginul jqGifPreview, puteți aduce aceeași funcție pe site-ul dvs. Web.

    Acest plugin gratuit jQuery lucrează la toate GIF-urile din pagină sau pot viza în mod specific orice doriți. Este o resursă fantastică, dar durează puțin timp pentru a înființa.

    Un GIF întrerupt este într-adevăr just un cadru al animației, afișate pe pagină.

    Din păcate, acest plugin nu trageți automat o imagine statică din GIF Pentru dumneavoastră. Dar, puteți realiza acest lucru folosind PHP sau orice alt limbaj de backend, deci cu un pic de cod, acest lucru poate fi automatizat.

    Acest plugin utilizează un atribut de date * la stocați locația imaginii GIF. Odată ce utilizatorul face clic pe imagine, acesta se va încărca automat în src atributul imaginii și să fie afișat pe ecran.

    Simplu, eficient și cu siguranță un efect elegant! Tot ce aveți nevoie este fișierele CSS / JS pentru acest plugin pe care le puteți trageți direct de la GitHub. Și, bineînțeles, veți face asta aveți nevoie de o copie a jQuery, de asemenea.

    De acolo, vă configurați imaginea astfel:

      

    Principalul src atributul trebuie conține imaginea statică. Puteți crea fie un script pentru a-l genera, fie puteți edita manual și încărca o fotografie statică pentru fiecare GIF.

    date-gif atribut deține animația reală GIF și vor schimba dacă faceți clic vizați clasa principală a imaginilor (în acest caz, este .myImg). Acum, tot ce aveți nevoie este o linie de jQuery pentru a obține totul de lucru:

     $ ( "MyImg.") JqGifPreview ().; 

    Categoric, unul dintre cele mai bune plug-in-uri jQuery pe care le-am văzut în această lună și este destul de ușor de configurat.

    Puteți afla mai multe prin vizitarea Pagina GitHub și există și o previzualizare live demo găzduit pe site-ul dezvoltatorului.