JQuery पर सुरुचिपूर्ण बैनर रोटेटर

संभवतः हर वेबमास्टर किसी प्रकार के संबद्ध कार्यक्रम में भाग लेता है और मैं कोई अपवाद नहीं हूँ। और संबद्ध उत्पादों को बढ़ावा देने के लिए बैनर रोटेटर्स लोकप्रियता हासिल कर रहे हैं। आप सही साइडबार में मेरी वेबसाइट पर इस तरह के रोटेटर का एक उदाहरण देख सकते हैं।

आमतौर पर, इस तरह के रोटेटर को अपनी साइट पर रखने के लिए, यह एक विशेष जावास्क्रिप्ट कोड स्थापित करने के लिए पर्याप्त है। यदि आप गहराई से देखते हैं, तो इस जावास्क्रिप्ट का कार्य आपके पृष्ठ पर एक विशेष iframe एम्बेड करना है, जो पहले से ही डेवलपर की साइट से आपके पृष्ठ पर बैनर रोटेटर को लोड करता है।

सब कुछ ठीक होगा, लेकिन इस दृष्टिकोण में कई कमियां हैं:

• साइट भेद्यता। दुर्भावनापूर्ण कोड आपकी साइट पर अपलोड किया जा सकता है। इसलिए, यदि आप अपनी साइट पर अपने रोटेटर को रखने का निर्णय लेते हैं, तो आपको डेवलपर्स पर भरोसा करने की आवश्यकता है
• आप डेवलपर की साइट पर निर्भर हैं। यानी यदि डेवलपर की साइट उपलब्ध नहीं है, तो बैनर रोटेटर आपकी साइट पर प्रदर्शित नहीं होगा।
• पृष्ठ लोड समय बढ़ाता है। यदि आप ऐसे बैनर रोटेटर्स के स्रोत कोड को देखते हैं, तो हम देख सकते हैं कि विभिन्न जावास्क्रिप्ट फाइलें और लाइब्रेरी वहां से जुड़ी हुई हैं, जिनका वजन> 100kb हो सकता है। उसी समय, कुछ लाइब्रेरी, जैसे कि jQuery, पहले से ही आपके पेज पर कनेक्ट हो सकती है, लेकिन ब्राउज़र को इसे दो बार डाउनलोड करना होगा।

यह सब मुझे अपना बैनर रोटेटर बनाने के बारे में सोचता था और यह किसी पर निर्भर नहीं करता था, और मेरे लिए गधे में आखिरी किक हाल ही में एवगेनी पोपोव की साइट (या उसके साथ जो कुछ भी था) का "पतन" था, जिस रोटेटर का मैं इस साइट पर उपयोग करता हूं, क्योंकि मेरी साइट लंबे समय से लोड हो रही थी।

नतीजतन, मेरा अपना jQuery बैनर रोटेटर अस्तित्व में आया, जिसका मुख्य लाभ यह है कि इसे अतिरिक्त जावास्क्रिप्ट पुस्तकालयों (पाठ्यक्रम के jQuery को छोड़कर) की आवश्यकता नहीं है और रोटेटर के सभी html कोड स्वयं प्लगइन में जावास्क्रिप्ट द्वारा उत्पन्न होते हैं। यह ब्राउज़र को एक बार प्लगइन फ़ाइल को कैश करने की अनुमति देता है और फिर इसे कैश से लेता है, और इससे साइट लोड करने की गति बढ़ जाएगी।

अपनी साइट पर इस तरह के रोटेटर का उपयोग करने के लिए, आपको सबसे पहले jQuery लाइब्रेरी और प्लगइन को कनेक्ट करना होगा। लेकिन हम सामान्य तरीके से jQuery लाइब्रेरी को कनेक्ट नहीं करेंगे, लेकिन Google रिपॉजिटरी से।

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>'); </script> <script type="text/javascript" src="js/jquery.rotator.js"></script> 

यह कोड आपकी साइट पर टैग के बीच रखा जाना चाहिए।

मैं इस पर ध्यान केंद्रित नहीं करूंगा, क्योंकि इस विषय पर मेरा एक विशेष लेख है "हम Google रिपॉजिटरी से jQuery लोड करके पृष्ठ लोडिंग गति बढ़ाते हैं ", मैं केवल यह कह सकता हूं कि इस दृष्टिकोण का उपयोग करके, हम पृष्ठ लोडिंग गति बढ़ा सकते हैं

सभी आवश्यक जावास्क्रिप्ट फ़ाइलों के जुड़े होने के बाद, आपको अपने पृष्ठ पर निम्नलिखित शैलियों को जोड़ना होगा:

 ul.slides_rotator{ margin: 0; padding: 0; position: relative; list-style: none; } div.rotator{ float: left; margin: 0 25px; position: relative; } a.rotator-nav{ position: absolute; top: 50%; margin-top: -16px; z-index: 3; cursor: pointer; } a.rotator-nav div{ height: 32px; width: 32px; background: url('../images/nav.png') no-repeat; } #rotator-left{ left:-16px; } #rotator-left div{ background-position: 0 0; } #rotator-left:hover div{ background-position: 0 -32px; } #rotator-right{ right:-16px; } #rotator-right div{ background-position: -32px 0; } #rotator-right:hover div{ background-position: -32px -32px; } 

शैलियों से जुड़े होने के बाद, आप रोटेटर प्लग-इन को कॉल करना शुरू कर सकते हैं। ऐसा करने के लिए, उस स्थान पर जहां आप रोटेटर रखना चाहते हैं, निम्नलिखित कोड लिखें:

 <div id='rotator'></div> 

अब हम प्लगइन को ही कॉल कर सकते हैं। यह निम्नानुसार किया जाता है:

 <script type="text/javascript"> $(function(){ $('#rotator').rotator({ slides: [ { url:'http://1popov.ru/c/577/disc1', img:'images/white200x450.jpg' }, { url:'http://1popov.ru/c/577/disc3', img:'images/beige200x450.jpg' }, { url:'http://1popov.ru/c/577/disc5', img:'images/sky200x450.jpg' }, { url:'http://1popov.ru/c/577/disc6', img:'images/gold200x450.jpg' }, { url:'http://1popov.ru/c/577/disc8', img:'images/green200x450.jpg' }, { url:'http://1popov.ru/c/577/disc11', img:'images/black200x450.jpg' } ], speed: 500, timeout: 3000, width: 200, height: 450, random: true, autorun: true, fx: 'slide', nav: false }); }) </script> 

जैसा कि आप देख सकते हैं, हम प्लगइन के लिए कई मापदंडों को पास करते हैं, अर्थात्:

• स्लाइड्स - स्लाइड्स की एक सरणी, उन वस्तुओं से मिलकर जिसमें एक संबद्ध लिंक निर्दिष्ट है - url, और एक स्लाइड चित्र - img
• गति - एमएस में एनीमेशन की गति।
• मध्यांतर - एमएस में एक स्लाइड दिखाने का समय।
• यादृच्छिक - यदि सही पर सेट है , तो स्लाइड अराजक क्रम में प्रदर्शित की जाएगी
• चौड़ाई - एक स्लाइड की चौड़ाई
• ऊँचाई - एक स्लाइड की ऊँचाई
• एफएक्स - एनीमेशन प्रभाव (स्लाइड - स्लाइड, फीका - डिमिंग), डिफ़ॉल्ट - फीका
• ऑटोरन - स्वचालित रूप से सभी स्लाइड्स के माध्यम से स्क्रॉल करते हैं, सत्य के लिए चूक
• नेवी - नेविगेशन बटन दिखाएं, डिफ़ॉल्ट गलत है

डेमो पेज यहाँ देखा जा सकता है।

सूत्रों को यहां डाउनलोड किया जा सकता है।

यहाँ अपने बैनर को घुमाने के लिए इस तरह के एक सरल प्लगइन है। मुझे उम्मीद है कि कोई काम आएगा।

UPD: कोड को सही किया, अब अंतिम स्लाइड के बाद पहले वाले को फिर से दिखाया गया है। सुविधा के लिए कुछ अतिरिक्त विकल्प भी जोड़े।