मुखपृष्ठ » यूआई / UX » फेसबुक के साथ एनिमेटेड GIF को jqGifPreview के साथ एम्बेड करें

    फेसबुक के साथ एनिमेटेड GIF को jqGifPreview के साथ एम्बेड करें

    ट्विटर और फेसबुक पर बहुत सारे लोग हैं एनिमेटेड GIF साझा करना रोज। यदि ये सभी ऑटो-प्ले हैं तो वे एक फीड में भीषण हो सकते हैं.

    दोनों नेटवर्क एक साथ इस के आसपास मिलता है क्लिक-टू-प्रीव्यू सुविधा सभी GIF के लिए। यह उपयोगकर्ता को चुनने देता है वे कौन से एनिमेशन देखना चाहते हैं एनिमेशन कब शुरू / बंद करना है, यह चुनकर.

    उसके साथ jqGifPreview प्लगइन, आप इसे अपनी वेबसाइट पर ला सकते हैं.

    इस मुफ्त jQuery प्लगइन पृष्ठ पर सभी GIF पर काम करता है, या विशेष रूप से किसी भी इच्छित को लक्षित कर सकता है। यह एक शानदार संसाधन है लेकिन इसे स्थापित करने में थोड़ा समय लगता है.

    एक रुका हुआ GIF वास्तव में बस है एनीमेशन का एक फ्रेम, पृष्ठ पर प्रदर्शित किया गया.

    दुर्भाग्य से, यह प्लगइन नहीं करता स्वचालित रूप से GIF से एक स्थिर तस्वीर खींचते हैं तुम्हारे लिए। लेकिन, आप इसे PHP या किसी अन्य बैकएंड भाषा का उपयोग करके पूरा कर सकते हैं, इसलिए थोड़ा सा कोड के साथ, यह स्वचालित हो सकता है.

    यह प्लगइन एक डेटा- * विशेषता का उपयोग करता है GIF छवि स्थान संग्रहीत करें. उपयोगकर्ता द्वारा छवि पर क्लिक करने के बाद, यह स्वचालित रूप से लोड हो जाएगा src छवि की विशेषता और स्क्रीन पर प्रदर्शित किया जाएगा.

    सरल, प्रभावी और निश्चित रूप से एक साफ प्रभाव! इस प्लगइन के लिए आपको सीएसएस / जेएस फाइलों की आवश्यकता है जो आप कर सकते हैं GitHub से सीधे खींचें. और हां, आप करेंगे jQuery की एक प्रति चाहिए, बहुत.

    वहां से, आप अपनी छवि इस तरह सेट करते हैं:

      

    मुख्य src विशेषता चाहिए स्थिर चित्र शामिल करें. आप इसे बनाने के लिए एक स्क्रिप्ट का निर्माण कर सकते हैं, या आप प्रत्येक जीआईएफ के लिए एक स्थिर शॉट को मैन्युअल रूप से संपादित और अपलोड कर सकते हैं.

    डेटा-gif गुण असली एनिमेटेड GIF रखता है और यदि आप क्लिक करते हैं तो वे स्वैप पर क्लिक करेंगे मुख्य छवि वर्ग को लक्षित करें (इस मामले में, यह है .myImg)। अब, आपको यह काम करने के लिए jQuery की एक पंक्ति की आवश्यकता है:

     $ ( "MyImg।") JqGifPreview ()।; 

    निश्चित रूप से, सबसे अच्छे jQuery प्लगइन्स में से एक जो मैंने इस महीने देखा है और इसे स्थापित करना बहुत आसान है.

    आप पर जाकर अधिक जान सकते हैं GitHub पेज और वहाँ भी एक है लाइव डेमो पूर्वावलोकन डेवलपर की वेबसाइट पर होस्ट किया गया.