सोशल नेटवर्क आइकन के साथ स्लाइडिंग पैनल प्लगइन

हाल ही में, सामाजिक नेटवर्क अधिक से अधिक लोकप्रियता प्राप्त कर रहे हैं। अधिक से अधिक लोग विभिन्न सामाजिक नेटवर्क में खाते खोलना शुरू कर रहे हैं। वे इसे विभिन्न कारणों से करते हैं। किसी को सिर्फ दोस्तों और समान विचारधारा वाले लोगों के साथ चैट करने के लिए, किसी को अपने सामान और सेवाओं को बढ़ावा देने के लिए, किसी को अपना ब्रांड बनाने के लिए, आदि। एक ट्विटर और फेसबुक अकाउंट बनाया।

इसलिए, मैंने अपनी साइट पर अपने सामाजिक खातों के लिंक रखने का फैसला किया। नेटवर्क। मैंने उन्हें तुरंत साइडबार में रख दिया, लेकिन फिर मैंने सोचा और एक फ़्लोटिंग पैनल बनाने का फैसला किया, जिस पर सामाजिक नेटवर्क में मेरे खातों के सभी लिंक रखे जाएंगे।

मैंने अन्य साइटों पर पहले से ही समान पैनल देखे हैं, लेकिन जब मैंने तैयार प्लगइन्स की तलाश की तो मुझे खुद के लिए उपयुक्त कुछ भी नहीं मिला। खैर, ईमानदारी से, मैं वास्तव में इसे खोजना नहीं चाहता। इसलिए मैंने अपना पहला jQuery प्लगइन बनाने का फैसला किया।

मेरे फ़्लोटिंग पैनल का विचार इस प्रकार है, पृष्ठ को स्क्रॉल करते समय, यह हमेशा एक प्रमुख स्थान पर होता है। पैनल के लिए प्रारंभिक पारदर्शिता को भी जोड़ा गया है और पृष्ठ को नीचे स्क्रॉल करते समय, पैनल आसानी से दिखाई देता है।

इस प्रकार, जब उपयोगकर्ता साइट पर सामग्री से परिचित हो गया और उसे पसंद किया, तो सामाजिक नेटवर्क के खातों के लिंक वाले पैनल को आसानी से दिखाया गया है। जब आप किसी लिंक पर माउस ले जाते हैं, तो यह पारदर्शी नहीं हो जाता है और 10px से साइड में चला जाता है।



नतीजतन, jquery.socializer.js प्लगइन का जन्म हुआ , जिसमें लचीली सेटिंग्स हैं और यह किसी भी साइट के लिए उपयुक्त है।

अपनी वेबसाइट पर सामाजिक नेटवर्क पर बुकमार्क के साथ एक समान पैनल बनाने के लिए, आपको स्वयं jQuery लाइब्रेरी और प्लगइन को कनेक्ट करना होगा।

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.socializer.js"></script> 

अगला, आपको लिंक के साथ एक फ्लोटिंग ब्लॉक बनाने की आवश्यकता है। यह मेरे लिए इस तरह दिखता है:

 <div class="soc_buttons" id="soc_buttons"> <a title="    twitter" target="_blank" href="http://twitter.com/ivanshamshur"><img src="/images/icons/twitter_new.png" ></a> <a title="    facebook" target="_blank" href="http://www.facebook.com/ivan.shamshur"><img src="/images/icons/facebook_new.png"></a> <a title="    RSS" target="_blank" href="http://feeds.feedburner.com/biznesguide"><img src="/images/icons/rss_new.png"></a> </div> 

इसे समापन टैग से तुरंत पहले रखा जाना चाहिए।

वैसे, इस ब्लॉक में आप अपनी इच्छानुसार कुछ भी रख सकते हैं!

आप शैलियों को लिख सकते हैं:

 .soc_buttons { position: absolute; right: 0; top: 152px; width: 70px; } .soc_buttons a { display: block; position: relative; } 

इसके बाद प्लगइन को कॉल करना है:

 <script type="text/javascript"> $(function(){ $('#soc_buttons').socializer(); }) </script> 

यह लाइन डिफ़ॉल्ट पैरामीटर के साथ प्लगइन को कॉल करेगी। नीचे दिए गए मापदंडों की पूरी सूची देखें:

• टाइप - स्लाइडिंग - फ्लोटिंग पैनल का प्रकार। फिसलना - तैरना, निश्चित होना - निश्चित होना। यानी, पेज को स्क्रॉल करते समय, पैनल की स्थिति या तो एक निश्चित ऊंचाई पर तय होती है, या लगातार नीचे स्लाइड होती है।
• स्थिति - दाएं - फ्लोटिंग पैनल का स्थान। दाएँ - बाएँ, बाएँ - बाएँ।
• अस्पष्टता - 0.1 - पृष्ठ लोड करते समय पैनल की प्रारंभिक पारदर्शिता। 0 से 1 तक के मूल्य उपलब्ध हैं।
• कंटेनर - दस्तावेज़ - ब्लॉक जिसके सापेक्ष फ्लोटिंग पैनल की पारदर्शिता बदल जाएगी। यानी, जब इस ब्लॉक की तह तक स्क्रॉल किया जाएगा, तो पारदर्शिता 1 होगी।
• inittop - 150 - पिक्सेल में स्क्रीन के शीर्ष से प्रारंभिक दूरी
• स्क्रॉलटॉप - 20 - पृष्ठ को स्क्रॉल करते समय स्क्रीन के ऊपरी किनारे से दूरी
• गति - 300 - एमएस में एनिमेशन अवधि
• hoverdistance - 15 - पिक्सल में वह दूरी जिसके द्वारा सोशल मीडिया आइकॉन को हिलाने पर आपके ऊपर हो जाता है
• स्क्रॉल-झूठी - एक कस्टम फ़ंक्शन जिसे कंटेनर नीचे की सीमा तक पहुंचने पर बुलाया जाएगा। एक पैरामीटर के रूप में, ऑब्जेक्ट एन
• एफएक्स - रैखिक - एनीमेशन नियंत्रण समारोह

महान प्रभाव देने के लिए, आपको प्लगइन का उपयोग करना होगा - jquery.easing.js

उपयोग के कुछ उदाहरण:

 $(function(){ $('#soc_buttons').socializer({ position: 'left', type: 'fixed', scrolltop: 50, opacity: 1 }); }); 

इस उदाहरण में, हम दिए गए मापदंडों के साथ प्लगइन को इनिशियलाइज़ करते हैं। इस कोड का उपयोग करते हुए, फ्लोटिंग पैनल को स्क्रीन के बाईं ओर रखा जाएगा और स्क्रॉल करते समय पृष्ठ स्क्रीन के शीर्ष किनारे से 50 पिक्सेल की निश्चित स्थिति पर कब्जा कर लेगा। पारदर्शिता 1 पर सेट है, जिसका अर्थ है कि हमारा पैनल लगातार दिखाई देगा।

यदि आपको पृष्ठ पर एक ब्लॉक निर्दिष्ट करने की आवश्यकता है जिसके लिए पारदर्शिता बदल जाएगी, तो आपको प्लगइन पर निम्नलिखित कॉल का उपयोग करने की आवश्यकता है:

 $(function(){ $('#soc_buttons').socializer({ container: '#id_blocka' }); }); 

यानी ब्लॉक आईडी को इंगित करें और सामने एक पाउंड का चिह्न रखें।

प्लगइन बहुत सरल है, यदि आप चाहें, तो आप इसे अपनी आवश्यकताओं के अनुसार रीमेक कर सकते हैं।

आप इस लिंक पर स्रोतों को डाउनलोड कर सकते हैं

डेमो पेज यहाँ देखें ।

यह मेरा पहला प्लगइन है, इसलिए कड़ाई से न्याय न करें। यदि आप इस प्लगइन को बेहतर बनाने में मदद करेंगे तो मैं आभारी रहूँगा!