jquery में छवि गैलरी. एक दिलचस्प प्रभाव के साथ jQuery में छवि गैलरी। jQuery स्वैप गैलरी

एक समान समाधान का उपयोग नवीनतम ब्लॉग लेख प्रदर्शित करने या उत्पाद प्रस्तुत करने के लिए किया जा सकता है।

अपनी तस्वीरों को फैंसी jQuery गैलरी में प्रदर्शित करने का एक अनोखा तरीका।

jQuery प्लगइन एकाधिक छवियों वाले उत्पाद पृष्ठ को लागू करने के लिए एकदम सही है। छवियों के बीच संक्रमण थंबनेल का उपयोग करके या नेविगेशन तीरों का उपयोग करके किया जा सकता है।

जब आप छवि पर अपना माउस घुमाते हैं तो छवि बड़ी हो जाती है।

व्यावसायिक jQuery गैलरी 2011।

निवो स्लाइडर के डेवलपर्स से एक और उच्च गुणवत्ता वाला jQuery प्लगइन। थंबनेल पर क्लिक करके छवि को बड़ा करें.

2011 के लिए नई jQuery गैलरी। छवियों की फ़ीड स्क्रीन की पूरी चौड़ाई तक फैली हुई है। आप फ़ोटो के बीच तीन तरीकों से नेविगेट कर सकते हैं: माउस व्हील का उपयोग करके, गैलरी के शीर्ष पर स्क्रॉल करना, और नीचे थंबनेल ब्लॉक का उपयोग करना। गैलरी बहुत प्रभावशाली दिखती है.

गैलरी में छवियाँ बेतरतीब ढंग से बढ़ाई और घटाई जाती हैं जिससे एक बुलबुला प्रभाव पैदा होता है।

शीर्ष पर स्लाइडर का उपयोग करके, आप स्टैक में छवियों के बीच की दूरी को बदल सकते हैं। जब आप किसी छवि पर क्लिक करते हैं, तो वह घूमती है।

2011 से प्लगइन. छवियों के विवरण के साथ एक नई गैलरी, ब्राउज़र विंडो के पूरे क्षेत्र में फैली हुई है, चाहे उसका आकार कुछ भी हो। छवि थंबनेल दिलचस्प ढंग से लागू किए गए हैं। तस्वीरों के बीच संक्रमण थंबनेल के पास तीरों का उपयोग करके और माउस व्हील का उपयोग करके किया जाता है।

प्लगइन स्वचालित रूप से फ़ोल्डर को स्कैन करता है और छवियों की छोटी प्रतियां बनाता है।

थंबनेल पर माउस घुमाने पर एक दिलचस्प प्रभाव।

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

आपकी परियोजनाओं के लिए नई jQuery गैलरी।

जब आप एक बटन दबाते हैं तो गैलरी पृष्ठ पर पॉप अप हो जाती है। बढ़ी हुई छवि के चारों ओर थंबनेल दिखाई देते हैं। आप छवियों के स्वचालित परिवर्तन को नियंत्रित कर सकते हैं. प्रयुक्त तकनीकें: jQuery, CSS, PHP।

jQuery गैलरी. स्लाइडों को स्वचालित रूप से बदलने और थंबनेल की स्क्रॉलिंग को लागू किया गया है यदि उनमें से बहुत अधिक हैं।

jQuery का उपयोग कर छवि गैलरी प्लगइन।

मोबाइल उपकरणों (फोन या टैबलेट) पर देखने के लिए अनुकूलित एक छवि गैलरी।

नया jQuery स्लाइडर. स्लाइड बदलते समय कई बेहतरीन एनिमेटेड प्रभाव।

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

दिलचस्प होवर प्रभाव.

थंबनेल के साथ jQyery गैलरी। एक कॉम्पैक्ट विंडो और पूर्ण-स्क्रीन विंडो में देखने की क्षमता लागू की गई है, साथ ही स्वचालित स्लाइड परिवर्तन को अक्षम/सक्षम करने की क्षमता भी लागू की गई है।

ब्राउज़र विंडो की चौड़ाई के आधार पर छवि ग्रिड को बढ़ाया जाता है। एक दिलचस्प होवर प्रभाव: सक्रिय पंक्ति और स्तंभ हाइलाइट किए गए हैं।

कोड की कुछ पंक्तियों में हल्की jQuery गैलरी।

डेमो पेज विभिन्न शैलियों में ड्रॉप-डाउन मेगा मेनू के लिए कई विकल्प प्रस्तुत करता है। इस मेनू में आप कॉन्फ़िगर कर सकते हैं: ड्रॉप-आउट प्रभाव, ड्रॉप-आउट गति, और किसी आइटम पर क्लिक करके या माउस घुमाकर ड्रॉप-आउट के बीच चयन भी कर सकते हैं।

छवि कैप्शन के साथ jQuery गैलरी। अनेक स्लाइड संक्रमण प्रभाव. छवियों के बीच नेविगेशन या तो तीरों का उपयोग करके या थंबनेल पर क्लिक करके किया जाता है।

छवि और उसके लघुचित्र वृत्तों के रूप में बनाए गए हैं।

एक फोटोग्राफर के पोर्टफोलियो को डिजाइन करने के लिए एक मूल जावास्क्रिप्ट समाधान। छवियों के बीच नेविगेशन ऊपर/बाएं/दाएं तीरों का उपयोग करके और मिनी-स्क्वायर (2डी स्पेस में आंदोलन की नकल) का उपयोग करके किया जाता है। आप अलग-अलग फोटो सत्रों की तस्वीरों को अलग-अलग ऊर्ध्वाधर पंक्तियों में समूहित कर सकते हैं और नेविगेशन तत्वों का उपयोग करके उनमें नेविगेट कर सकते हैं। डेमो देखें.

ब्राउज़र विंडो के संपूर्ण आकार तक फैली छवियों को देखने के लिए प्लगइन। पोर्टफोलियो से कार्यों को प्रदर्शित करने के लिए उपयोग किया जा सकता है।

गैलरी गूगल मानचित्र के साथ एकीकृत। आप निचले दाएं कोने में आइकन पर क्लिक करके इसे पूर्ण स्क्रीन तक विस्तारित कर सकते हैं। यात्रा वेबसाइटों के लिए बिल्कुल उपयुक्त.

थंबनेल के साथ jQuery गैलरी।

थंबनेल के साथ स्लाइड शो.

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

कई प्रदर्शन विकल्प और सेटिंग्स।

सुंदर दिखता है और सभी आधुनिक ब्राउज़रों में बढ़िया काम करता है

आप स्वचालित स्लाइड शो (स्टार्ट/स्टॉप) को नियंत्रित कर सकते हैं, कीबोर्ड तीरों का उपयोग करके स्लाइड स्विच कर सकते हैं, स्लाइड शीर्षकों का स्वचालित पृष्ठांकन, यदि उनमें से कई हैं, तो एक पृष्ठ पर कई गैलरी का समर्थन करता है, स्लाइड के लिए कैप्शन, एपीआई समर्थन और अपना स्वयं का निर्माण करने की क्षमता स्लाइड संक्रमण प्रभाव

हम जो गैलरी बनाएंगे उसका परिणाम इस तरह दिखना चाहिए। आप डेमो देख सकते हैं और यदि आप चाहें तो गैलरी का अंतिम परिणाम डाउनलोड कर सकते हैं।

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

मैं 15 अनुकूली jQuery प्लगइन्स का एक और चयन प्रस्तुत करता हूं जो डेस्कटॉप ब्राउज़र दोनों के साथ अनुकूल हैं और विभिन्न मोबाइल उपकरणों (लैपटॉप, स्मार्टफोन, टैबलेट इत्यादि) की स्क्रीन में पूरी तरह फिट बैठते हैं।

डेवलपर्स की वेबसाइटों पर डेमो देखें, अपनी पसंद का प्लगइन डाउनलोड करें और बनाएं, बनाएं, बनाएं...

iLighbox एक हल्का jQuery लाइटबॉक्स प्लगइन है जो विभिन्न फ़ाइल प्रकारों की एक विस्तृत श्रृंखला के लिए समर्थन करता है: चित्र, वीडियो, फ्लैश/एसडब्ल्यूएफ, अजाक्स सामग्री, फ्रेम और इनलाइन मानचित्र। यह प्लगइन सोशल मीडिया बटन भी जोड़ता है, जिससे उपयोगकर्ता फेसबुक, ट्विटर या रेडिट के माध्यम से सामग्री साझा कर सकते हैं। सामान्य और पूर्ण स्क्रीन मोड में देखने के साथ शानदार स्लाइड शो, छवि गैलरी और वीडियो व्यवस्थित करने का एक उत्कृष्ट अवसर।

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

• निर्भरता: jQuery
• ब्राउज़र समर्थन: IE7+, क्रोम, फ़ायरफ़ॉक्स, सफारी और ओपेरा
• लाइसेंस: शैतान जानता है)))

स्वाइपबॉक्स एक JQuery प्लगइन है जो मोबाइल प्लेटफ़ॉर्म पर टच स्क्रीन के लिए समर्थन प्रदान करता है। छवियों के अलावा, प्लगइन Youtube और Vimeo से एम्बेडेड वीडियो का समर्थन करता है। स्वाइपबॉक्स को किसी भी प्रोजेक्ट से जोड़ना बहुत आसान है; प्लगइन में इसकी कार्यक्षमता और व्यवहार को अनुकूलित करने के लिए कई सहज विकल्प हैं। डेवलपर की वेबसाइट पर प्लगइन को कनेक्ट करने और उपयोग करने पर विस्तृत दस्तावेज़ हैं, बिना किसी अनावश्यक दिखावा के, सब कुछ बस बिंदु पर है, इसलिए मुझे लगता है कि यह पता लगाना मुश्किल नहीं होगा कि क्या, कहाँ और क्यों।

• निर्भरता: jQuery
• ब्राउज़र समर्थन: IE9+, क्रोम, Safari, फ़ायरफ़ॉक्स, ओपेरा, IOS4+, Android और Windows फ़ोन
• लाइसेंस: निर्धारित नहीं, शायद आप भाग्यशाली होंगे)))

jQuery या Zepto.js पर आधारित एक लंबे समय से ज्ञात और अच्छी तरह से सिद्ध लाइटबॉक्स प्लगइन। प्लगइन के लेखक दिमित्री सेमेनोव हैं, जो फोटोस्वाइप प्लगइन के डेवलपर भी हैं, जिसके बारे में मैं नीचे बात करूंगा। एक jQuery/Zepto प्लगइन के रूप में वितरित, इसमें अधिक उन्नत सुविधाएं हैं जो PhotoSwipe में नहीं मिलती हैं, जैसे वीडियो समर्थन, मानचित्रों और अजाक्स सामग्री का प्रदर्शन, अंतर्निहित फॉर्म के साथ मोडल विंडो का कार्यान्वयन। सभी मानदंडों के अनुसार, यह वेब डेवलपर के लिए एक और बढ़िया टूल है। वर्डप्रेस के लिए एक अलग प्लगइन और सेटअप और उपयोग पर विस्तृत दस्तावेज़ीकरण है। एकमात्र निराशाजनक बात रूसी में दस्तावेज़ीकरण की कमी है, नाम और उपनाम से देखते हुए, लेखक रूसी लगता है, कभी नहीं समझ पाया कि यह हानिकारक था, या अपने स्वयं के परिष्कार के बारे में काल्पनिक जागरूकता के कारण, लेकिन ब्लाह। खैर, ठीक है, इसका पता लगाने की जरूरत किसे है, हमने भी चाय को नरम-उबला नहीं किया है)))।

• निर्भरता: jQuery 1.9.1+, या Zepto.js
• ब्राउज़र समर्थन: IE7 (आंशिक रूप से), IE8+, क्रोम, फ़ायरफ़ॉक्स, सफारी और ओपेरा
• लाइसेंस: एमआईटी लाइसेंस

• निर्भरता: जावास्क्रिप्ट या jQuery
• ब्राउज़र समर्थन
• लाइसेंस: एमआईटी लाइसेंस

कमोबेश समझदार डेवलपर्स के लिए 6 केबिट लाइटबॉक्स प्लगइन, सभी आवश्यक कार्यों से सुसज्जित। सभी सामान्य सामग्री प्रकारों (टेक्स्ट, इमेज, आईफ्रेम, अजाक्स) का समर्थन करने के अलावा, एक अतिरिक्त कनेक्ट करने की क्षमता है, और आप इस प्लगइन के लिए अपना स्वयं का एक्सटेंशन भी विकसित कर सकते हैं, जो एक नया बनाते समय आपकी आवश्यकताओं को पूरी तरह से पूरा करेगा। परियोजना। यह पूरी चीज़ (एक्सटेंशन डेवलपमेंट) कैसे काम करती है, मैंने वास्तव में इस पर ध्यान नहीं दिया है, लेकिन जो लोग इस प्लगइन को इंस्टॉल करते हैं, मुझे लगता है कि वे इसका पता लगा लेंगे)))।

• निर्भरता: jQuery
• ब्राउज़र समर्थन: IE8+, क्रोम, फ़ायरफ़ॉक्स, सफारी और ओपेरा
• लाइसेंस: एमआईटी लाइसेंस

लाइटगैलरी कई अतिरिक्त सुविधाओं के साथ एक बहुक्रियाशील लाइटबॉक्स प्लगइन है। लाइटबॉक्स के सबसे छोटे विवरणों को अनुकूलित करने के लिए 20 से अधिक विकल्पों के साथ आता है। यहाँ सब कुछ है, अच्छा, या लगभग सब कुछ))। सुव्यवस्थित थंबनेल, नेविगेशन तत्वों और थंबनेल स्क्रॉलिंग के साथ पूर्ण छवि गैलरी। एक अव्यवस्थित सूची के रूप में सरल HTML मार्कअप

पूर्ण आकार की छवियों के लिए डेटा-src विशेषता का उपयोग करना। यही बात Youtube और Vimeo के वीडियो पर भी लागू होती है। सभी वीडियो प्रारूपों HTML5, MP4, WebM, Ogg के लिए उत्कृष्ट समर्थन... एनिमेटेड थंबनेल, मोबाइल रिस्पॉन्सिव लेआउट, स्लाइड प्रभाव और छवियों और अन्य सामग्री के बीच स्विच करते समय सहज बदलाव। सीएसएस का उपयोग करके उपस्थिति को आसानी से आकार और अनुकूलित किया जाता है। छवि प्रीलोडिंग और कोड अनुकूलन। डेस्कटॉप के लिए कीबोर्ड का उपयोग करके नेविगेशन, साथ ही अतिरिक्त फ़ॉन्ट आइकन का उपयोग करने की क्षमता। लाइटगैलरी वह जगह है जहां वास्तविक "गठबंधन" है, मुख्य बात इस प्लगइन की सेटिंग्स और व्यापक क्षमताओं की प्रचुरता में खो जाना नहीं है।
जिन लोगों को एक अच्छे स्लाइडर की आवश्यकता है, मैं उन्हीं डेवलपर्स में से एक पर ध्यान देने की सलाह देता हूं।
• निर्भरता: jQuery
• ब्राउज़र समर्थन: IE7+, क्रोम, फ़ायरफ़ॉक्स, सफारी, ओपेरा, iOS, एंड्रॉइड और विंडोज फोन
• लाइसेंस: एमआईटी लाइसेंस



13. स्ट्रिपजेएस

असामान्य, मैं यहां तक ​​​​कहूंगा: लाइटबॉक्स का एक असामान्य कार्यान्वयन, या बल्कि, सामग्री की एक असामान्य प्रस्तुति, जब एक छवि या वीडियो, लाइटबॉक्स डिज़ाइन में, दाईं ओर दिखाई देता है, पूरी स्क्रीन को नहीं, बल्कि केवल एक दिए गए आकार को भरता है एक पूर्ण आकार की छवि या वीडियो। बड़ी स्क्रीन पर यह दृष्टिकोण समझ में आता है; पेज के साथ इंटरेक्शन संभव रहता है। मोबाइल उपकरणों की छोटी स्क्रीन पर, यह सभी नवीन डिज़ाइन आसानी से एक क्लासिक "लाइटबॉक्स" में बदल जाता है। विचार दिलचस्प है, डेमो देखें, शायद कोई ऐसी रचनात्मकता जोड़ देगा।

• निर्भरता: jQuery
• ब्राउज़र समर्थन: IE7+, क्रोम, फ़ायरफ़ॉक्स, Safari, ओपेरा, iOS 5+ और Android 3+
• लाइसेंस: क्रिएटिव कॉमन्स BY-NC-ND 3.0 लाइसेंस



14.हल्की परत

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

• निर्भरता: jQuery
• ब्राउज़र समर्थन: IE9+, क्रोम, फ़ायरफ़ॉक्स, सफारी और ओपेरा
• लाइसेंस: एमआईटी लाइसेंस



15. फ्लूइडबॉक्स

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

• निर्भरता: jQuery
• ब्राउज़र समर्थन: IE9+, क्रोम, फ़ायरफ़ॉक्स, सफारी, ओपेरा
• लाइसेंस: एमआईटी लाइसेंस



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

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

पूरे सम्मान के साथ, एंड्रयू

सभी को नमस्कार!
सभी प्रकार के डेवलपर्स, अपना अगला वेब प्रोजेक्ट बनाते समय, अक्सर इस सवाल में रुचि रखते हैं कि अपने उपयोगकर्ताओं को विभिन्न प्रकार की छवियों के साथ कैसे प्रस्तुत किया जाए, चाहे वे तस्वीरें हों या चित्रों के सेट। इसके लिए, ऑनलाइन स्पेस के जिज्ञासु दिमाग, अधिकांश भाग के लिए यह एक "बुर्जुआ" स्पेस है, शानदार, रंगीन और सबसे महत्वपूर्ण रूप से कार्यात्मक स्लाइड शो और फोटो गैलरी बनाने के लिए अधिक से अधिक नए समाधानों की तलाश कर रहे हैं। अधिकांश भाग के लिए, उन्हें डेवलपर्स द्वारा बनाए जा रहे वेब प्रोजेक्ट के टेम्पलेट के डिज़ाइन में फिट करने के लिए या किसी विशिष्ट साइट प्रबंधन इंजन के लिए प्लगइन्स और मॉड्यूल के रूप में अनुकूलित किया जाता है। यह आधुनिक टेम्प्लेट देखने लायक है, दुर्लभ अपवादों को छोड़कर, कोई भी थीम किसी प्रकार के प्लग-इन स्लाइडर या साधारण इमेज रोटेटर के बिना नहीं चल सकती है। तो यह समझ में आता है कि कई वेब डेवलपर अपने शस्त्रागार में ऐसा कुछ रखना चाहते हैं और अपनी साइटों पर छवियों को प्रभावी ढंग से प्रस्तुत करके अपने पाठकों को पूरी तरह से आश्चर्यचकित करना चाहते हैं।

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

की.साइट | डेमो





स्लाइड शो तत्वों, संक्रमण प्रभावों और कई एल्बम विकल्पों के साथ एक पूर्ण, अनुकूलन योग्य jQuery छवि गैलरी। सभी आधुनिक डेस्कटॉप और मोबाइल ब्राउज़र के साथ संगत।



jQuery का उपयोग करके पूर्ण स्क्रीन गैलरी कैसे बनाएं, इस पर एक ट्यूटोरियल। विचार यह है कि चित्रित पूर्ण-स्क्रीन छवि का एक थंबनेल किनारे पर दिखाई दे, जब आप तीरों या माउस क्लिक का उपयोग करके छवियों के माध्यम से आगे बढ़ते हैं तो एक प्रतिबिंब होता है। आपके द्वारा चुने गए संक्रमण के आधार पर बड़ी छवियां स्लाइड शो शैली में ऊपर या नीचे जाती हैं। छवि को स्केल करने की क्षमता, जो पृष्ठभूमि में छवि को पूर्ण स्क्रीन मोड में देखने योग्य बनाती है या पृष्ठ आकार में समायोजित करती है।

लंबन स्लाइडर



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



jQuery के साथ मिनिमलिस्टिक स्लाइड शो गैलरी एक उत्कृष्ट छवि गैलरी है जिसमें चित्रों को स्वचालित रूप से बदलने के लिए तत्व हैं, साथ ही प्रदर्शन को मैन्युअल रूप से नियंत्रित करने और थंबनेल के ग्रिड के साथ ड्रॉप-डाउन ब्लॉक से छवियों का चयन करने की क्षमता है। नुकसानों में से एक पूर्ण आकार की छवियों को देखने की कमी है, लेकिन यह इस गैलरी का अतिसूक्ष्मवाद है।



यह एक पूर्ण-स्क्रीन स्लाइड शो है जिसमें स्वचालित रूप से बदलती छवियां हैं, कोई मन-उड़ाने वाला प्रभाव नहीं है, सब कुछ सरल और स्वादिष्ट है।



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



एक छोटा (2kb) jQuery प्लगइन है जो छवियों को स्लाइड शो के रूप में प्रदर्शित करने का एक सरल, कोई बकवास तरीका प्रदान करता है।



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



कई जावास्क्रिप्ट और jQuery छवि स्लाइडर्स के विपरीत, Slider.js एक हाइब्रिड समाधान है, जो CSS3 ट्रांज़िशन और एनिमेशन द्वारा संचालित है।



यह HTML5 और CSS3 में विभिन्न प्रस्तुतियाँ बनाने के लिए एक पेज का टेम्पलेट है।



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



वेबसाइटों और अन्य वेब परियोजनाओं पर स्लाइड शो बनाने के लिए एक अन्य उपकरण से अधिक कुछ नहीं है। सभी आधुनिक ब्राउज़रों, क्षैतिज और ऊर्ध्वाधर एनिमेशन, कस्टम ट्रांज़िशन के लिए समर्थन, कॉलबैक एपीआई और बहुत कुछ का समर्थन करता है। आप अपनी स्लाइड में किसी भी HTML तत्व का उपयोग कर सकते हैं, यह शुरुआती लोगों के लिए समझने योग्य और सुलभ है, और पूरी तरह से निःशुल्क वितरित किया जाता है।

चुस्त विकास के लिए जावास्क्रिप्ट स्लाइड शो



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



एक jQuery प्लगइन है जो आपको आकर्षक एनीमेशन प्रभावों के साथ अव्यवस्थित सूचियों को स्लाइड शो में बदलने की अनुमति देता है। स्लाइड शो में, आप संख्याओं या थंबनेल का उपयोग करके, या पिछला और अगला बटन का उपयोग करके स्लाइड की एक सूची प्रदर्शित कर सकते हैं। स्लाइडर में कई मूल एनीमेशन प्रकार हैं, जिनमें क्यूब (विभिन्न उप-प्रकारों के साथ), पाइप, ब्लॉक और बहुत कुछ शामिल हैं।



आपके वेब प्रोजेक्ट पर विभिन्न सामग्री की सभी प्रकार की प्रस्तुतियों को व्यवस्थित करने के लिए उपकरणों का एक पूरा सेट। बुर्जुआ लोगों ने jQuery के जादू का उपयोग करके लगभग सभी प्रकार के विभिन्न स्लाइडर्स और गैलरी सहित अपना सर्वश्रेष्ठ प्रदर्शन किया। फोटो स्लाइडर, फोटो गैलरी, डायनामिक स्लाइड शो, हिंडोला, सामग्री स्लाइडर, टैब मेनू और बहुत कुछ, सामान्य तौर पर हमारी अदम्य कल्पना के लिए जंगली जगह है।



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



- jQuery पर निर्मित एक सरल स्लाइडर, सभी मामलों में सरल, विशेष कौशल की आवश्यकता नहीं है, मुझे लगता है कि कई लोग इसे अपनी वेबसाइटों पर स्लाइड शो लागू करने के लिए उपयोगी पाएंगे। प्लगइन का परीक्षण धीमे IE ब्राउज़र सहित सभी आधुनिक ब्राउज़रों में किया गया था।



jbgallery एक प्रकार का यूजर इंटरफ़ेस विजेट है जो jQuery लाइब्रेरी के जावास्क्रिप्ट में लिखा गया है। इसका कार्य फ़ुल-स्क्रीन मोड में साइट की पृष्ठभूमि के रूप में एक बड़ी छवि, स्लाइडर के रूप में कई छवियां दिखाना है। सभी देखने के तरीकों में देखने के नियंत्रण होते हैं। यह अपने तरीके से एक दिलचस्प समाधान है, और कुछ मामलों में यह मानक भी नहीं है।



यह छवियों के बीच संक्रमण प्रभावों के साथ आपकी तस्वीरों को स्लाइड शो के रूप में प्रदर्शित करने के लिए उपयोग में आसान jQuery प्लगइन है (आपने और भी दिलचस्प तस्वीरें देखी हैं)। jqFancyTransitions Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, ओपेरा 9+ के साथ संगत और व्यापक रूप से परीक्षण किया गया है।



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



लाइटबॉक्स श्रृंखला का एक और jQuery प्लगइन, हालांकि इसका वजन बेहद कम (9 KB) है, लेकिन इसमें ढेर सारी कार्यक्षमता है। एक शालीनता से डिज़ाइन किया गया इंटरफ़ेस है जिसे आप सीएसएस का उपयोग करके हमेशा सुधार या अनुकूलित कर सकते हैं।



नाम से ही यह स्पष्ट हो जाता है कि इसमें कुछ भी फैंसी नहीं है, हमारे पास एक बहुत ही सरल स्वचालित छवि स्क्रोलर है, जिसमें पूरी तरह से नियंत्रण गायब हैं। कौन जानता है, शायद यह स्लाइडर अपने अतिसूक्ष्मवाद से आपका ध्यान आकर्षित करेगा।



विभिन्न प्रकार के ट्रांज़िशन के साथ छवि रोटेटर। यह स्वचालित रूप से और क्लिक करके दोनों तरह से काम करता है, और इसे स्थापित करना काफी आसान है।



- केवल एक स्लाइडर के बजाय एक पूर्ण छवि गैलरी। थंबनेल का पूर्वावलोकन और संक्रमण प्रभावों का चयन करने की क्षमता, सभी ब्राउज़रों के लिए पूर्ण समर्थन, एक वेब प्रोजेक्ट में एकीकरण का विस्तृत विवरण और मुफ्त वितरण।



यह स्क्रिप्टाकुलस/प्रोटोटाइप या jQuery का उपयोग करके उपयोग में आसान स्लाइडशो का कार्यान्वयन है। होरिनाजा कुछ हद तक एक अभिनव समाधान है क्योंकि यह आपको स्लाइडर में रखी गई सामग्री को स्क्रॉल करने के लिए एक व्हील का उपयोग करने की अनुमति देता है। जब माउस पॉइंटर स्लाइड शो क्षेत्र के बाहर होता है, तो स्क्रॉलिंग स्वचालित रूप से होती है; जब पॉइंटर को स्लाइड शो के ऊपर रखा जाता है, तो स्क्रॉल करना बंद हो जाता है।



यह सरल छवि स्क्रॉलर्स की श्रृंखला की एक सुविधा है, हालांकि देखने के नियंत्रण के साथ, और इसलिए स्वचालित और मैन्युअल दोनों मोड में काम करती है।



s3Slider एक jQuery प्लगइन है जो छवियों की एक अव्यवस्थित सूची से एक स्लाइड शो बनाता है और इसे किसी भी वेब प्लेटफ़ॉर्म पर आसानी से लागू किया जा सकता है।



यह एक jQuery प्लगइन है जो बैंडविड्थ की बचत करते हुए बड़ी मात्रा में फ़ोटो संसाधित करने के लिए अनुकूलित है।

वेगास पृष्ठभूमि



वेगास बैकग्राउंड jQuery प्लगइन आपको स्लाइड शो तत्वों के साथ, वेब पेजों पर सुंदर पूर्ण-स्क्रीन पृष्ठभूमि छवियां जोड़ने की अनुमति देता है। यदि आप प्लगइन के साथ काम करने की पेचीदगियों का ध्यानपूर्वक अध्ययन करते हैं, तो आप निश्चित रूप से कई दिलचस्प समाधान पा सकते हैं, केवल तभी जब आपको इसकी आवश्यकता हो।



- स्लाइडर के रूप में एक स्लाइडर, न अधिक, न कम, छवियों के लिए कैप्शन या लेखों की घोषणाओं और सरल नियंत्रणों के साथ, यादृच्छिक रूप से।



छवि देखने को व्यवस्थित करने के लिए एक हल्का (लगभग 5 KB) जावास्क्रिप्ट है। बड़ी छवियों का स्वचालित आकार और स्केलिंग आपको ब्राउज़र विंडो के भीतर चित्र को पूर्ण आकार में देखने की अनुमति देता है



PikaChoose jQuery इमेज गैलरी का संस्करण 4 उपलब्ध है! Pikachoose शानदार फीचर्स वाला एक हल्का jQuery स्लाइड शो है! फैंसीबॉक्स के साथ एकीकरण, उत्कृष्ट थीम (हालांकि मुफ़्त नहीं) और बहुत कुछ प्लगइन डेवलपर्स द्वारा आपके ध्यान में पेश किया जाता है।



आपकी सूची में छवियों की संख्या की जाँच करता है और गतिशील रूप से डिजिटल नेविगेशन के रूप में फोटो लिंक का एक सेट बनाता है। इसके अलावा, प्रत्येक छवि पर क्लिक करने से स्लाइड आगे या पीछे चली जाएंगी, और आप चित्र पर क्लिक करने वाले क्षेत्र के आधार पर छवियों को स्क्रॉल भी कर सकते हैं (उदाहरण के लिए: चित्र के बाईं ओर क्लिक करने से स्लाइड आगे और पीछे चली जाएंगी, क्रमशः, छवि के दाईं ओर के लिए)।



एक और jQuery स्लाइडर जो किसी भी वर्डप्रेस टेम्पलेट में पूरी तरह फिट होगा।



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



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



पिरोबॉक्स एक हल्का jQuery "लाइटबॉक्स" स्क्रिप्ट है, देखने को एक पॉप-अप ब्लॉक में किया जाता है जो सभी नियंत्रणों के साथ स्वचालित रूप से छवि आकार को समायोजित करता है।



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

HTML5 और jQuery के साथ फुलस्क्रीन स्लाइड शो



स्लाइड शो बनाने और पूर्ण स्क्रीन मोड में चित्र प्रदर्शित करने के लिए, डेवलपर्स ने पहले से ही परिचित वेगास jQuery प्लगइन का उपयोग किया, जिसमें पहले समूह के लेखों में विस्तार से वर्णित कई विचार और तकनीकें शामिल हैं। HTML5 ऑडियो तत्वों की उपस्थिति और छवियों के बीच संक्रमण की शैली आकर्षक है।





कोड्रॉप्स टीम का एक और विकास, एक पूर्ण विकसित और कार्यात्मक छवि गैलरी, लेकिन इसका वर्णन करने का कोई मतलब नहीं है, आपको इसे देखना होगा।



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



एक जावास्क्रिप्ट छवि गैलरी ढांचा है जो jQuery लाइब्रेरी के शीर्ष पर बनाया गया है। लक्ष्य वेब और मोबाइल उपकरणों के लिए एक पेशेवर छवि गैलरी विकसित करने की प्रक्रिया को सरल बनाना है। आप इसे पॉप-अप विंडो या पूर्ण स्क्रीन मोड में देख सकते हैं।



हम चुपचाप इसकी आदत डालना शुरू कर रहे हैं और कोड्रॉप्स टीम के नए कार्यों की प्रतीक्षा कर रहे हैं। पूर्ण स्क्रीन मोड में छवियों को देखने के लिए कृपया शानदार 3डी ट्रांज़िशन प्रभाव वाला एक उत्कृष्ट छवि स्लाइडर प्राप्त करें।



स्लाइड शो आयोजक श्रृंखला से एक और वर्डप्रेस प्लगइन। आसानी से लगभग किसी भी डिज़ाइन में एकीकृत हो जाता है और अनुभवी उपयोगकर्ताओं और गैर-अनुभवी लोगों के लिए भी कई अनुकूलन विकल्प प्रदान करता है।



वर्डप्रेस के लिए लिखा गया एक और प्लगइन, यह आपके ब्लॉग पर चित्रों या किसी अन्य सामग्री के स्लाइड शो को व्यवस्थित करना बहुत आसान बना देगा।



वर्डप्रेस में एकीकरण के लिए एक अच्छा स्लाइड शो प्लगइन। Xili-floom-स्लाइड शो स्वचालित रूप से इंस्टॉल हो जाता है, और व्यक्तिगत सेटिंग्स की भी अनुमति है।



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



यह प्लगइन/विजेट आपको वर्डप्रेस इंजन पर चलने वाली अपनी वेबसाइट या ब्लॉग के लिए गतिशील, नियंत्रित स्लाइडशो और प्रस्तुतियाँ बनाने की अनुमति देता है।



यह वर्डप्रेस प्लगइन एम्बेडेड गैलरी छवियों को एक सरल और लचीले स्लाइड शो में बदल देता है। प्लगइन फ्लेक्सस्लाइडर jQuery छवि स्लाइडर और उपयोगकर्ता की व्यक्तिगत सेटिंग्स का उपयोग करता है।



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



वर्डप्रेस और अन्य के लिए एक सरल स्लाइडर। कुछ भी अतिश्योक्तिपूर्ण या बोझिल नहीं, काम न्यूनतम शैली में किया जाता है, स्थिरता और गति पर जोर दिया जाता है, यह ब्लॉग प्रबंधन इंजन से पूरी तरह जुड़ता है।



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



वर्डप्रेस के लिए एक प्लगइन है जिसके साथ आप आसानी से और जल्दी से अपनी वेबसाइट पर एक छवि गैलरी को स्लाइड शो मोड में देखने की क्षमता के साथ व्यवस्थित कर सकते हैं। प्रदर्शन या तो स्वचालित हो सकता है या छवियों के लिए थंबनेल और कैप्शन के प्रदर्शन के साथ पूरी तरह से नियंत्रित किया जा सकता है।

की.साइट | डेमो



किसी पोस्ट/पेज की सभी तस्वीरें स्लाइड शो के रूप में दिखाता है। आसान स्थापना। इस प्लगइन को संक्रमण एनिमेशन वाले संस्करण के लिए एडोब फ्लैश की आवश्यकता होती है, यदि फ्लैश नहीं मिलता है तो स्लाइडर हमेशा की तरह काम करता है।



वर्डप्रेस के लिए एक और सरल स्लाइडर, यह पोस्ट के लिए छवियां और लेखों की छोटी घोषणाएं दिखाता है। मैं समय-समय पर इस ब्लॉग पर ऐसे ही एक प्लगइन का उपयोग करता हूं।



उल्का स्लाइड एक jQuery वर्डप्रेस स्लाइडर है जिसमें चुनने के लिए बीस से अधिक संक्रमण शैलियाँ हैं। लेखक ने प्लगइन को "उल्का" कहा, संभवतः संचालन की गति को दर्शाते हुए, शायद मैंने कुछ भी उल्कापिंड नोटिस नहीं किया;



oQey गैलरी वर्डप्रेस के लिए स्लाइड शो तत्वों के साथ एक पूर्ण छवि गैलरी है, जिसमें अंतर्निहित वीडियो और संगीत क्षमताएं हैं।



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



फ्लैश गैलरी प्लगइन प्रति पोस्ट कई एल्बम, पूर्ण स्क्रीन देखने और स्लाइड शो मोड के समर्थन के साथ, आपकी नियमित गैलरी को शानदार छवि दीवारों में बदल देता है।



WOW स्लाइडर अद्भुत दृश्य प्रभावों (विस्फोट, फ्लाई, ब्लाइंड्स, स्क्वेयर्स, फ्रैग्मेंट्स, बेसिक, फेड, स्टैक, वर्टिकल स्टैक और लीनियर) और पेशेवर रूप से डिजाइन किए गए टेम्पलेट्स के साथ वर्डप्रेस के लिए एक jQuery छवि स्लाइडर है।



प्रमोशन स्लाइडर एक jQuery प्लगइन है जो एक साधारण स्लाइड शो बनाना, या एक पेज पर घूमने वाले विज्ञापनों के कई क्षेत्रों को लागू करना आसान बनाता है, क्योंकि यह एक उच्च अनुकूलन योग्य टूल है, आप स्लाइडर में क्या दिखाते हैं और कैसे दिखाते हैं, इस पर आपका पूरा नियंत्रण होगा। मॉड्यूल आम तौर पर काम करता है.

| डेमो



संस्करण 2.4 में नया: वर्डप्रेस संपादक के माध्यम से सीधे ड्रैग-एन-ड्रॉप फोटो सॉर्टिंग के लिए समर्थन, साथ ही मुख्य छवियों में फोटो लिंक जोड़ने की क्षमता। (IE8 में कुछ बग हो सकते हैं, यह सभी प्रमुख ब्राउज़रों में ठीक काम करता है। लेखक भविष्य में IE8 के लिए पूर्ण समर्थन का वादा करते हैं।)

| डेमो



इस समीक्षा का अंतिम राग वर्डप्रेस के लिए यह प्लगइन होगा, छवियों को चुनने और बदलने के लिए दिलचस्प दृश्य प्रभावों वाला एक और स्लाइडर।

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

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

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

सूत्रों का कहना है

HTML मार्कअप

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



• श्रेणियाँ:


• सभी


• श्रेणी 1


• श्रेणी 2


• श्रेणी 3


• श्रेणी 4


• 
  
  
  
  
  
  चित्र का नाम
  
  
  

जैसा कि ऊपर उल्लेख किया गया है, सूची आइटम गैलरी में छवियां हैं। प्रत्येक सूची तत्व में घटक शामिल होते हैं। यह स्वयं छवि है, या यों कहें कि इसका लघुचित्र, साथ ही एक विवरण भी है। थंबनेल मुख्य छवि का लिंक है. जावास्क्रिप्ट को कॉल करने और मुख्य छवि खोलने के लिए rel विशेषता की आवश्यकता है।

2 महत्वपूर्ण बातें भी न भूलें: ली सूची तत्व में एक अद्वितीय डेटा-आईडी विशेषता होनी चाहिए। डेटा-प्रकार विशेषता में श्रेणी वर्ग शामिल है, जिसकी सूची मैंने ऊपर वर्णित की है। ऐसा लगता है कि सब कुछ मार्कअप के बारे में है।

सीएसएस शैलियाँ

मैं विशेष रूप से शैलियों पर ध्यान केंद्रित नहीं करूंगा, क्योंकि हम तैयार प्रीटीफोटो लाइब्रेरी का उपयोग करते हैं, जो छवि को बड़ा करने के लिए जिम्मेदार है, और इसमें काफी सीएसएस कोड है। हालाँकि, यह ध्यान देने योग्य है कि बढ़ी हुई छवि को डिज़ाइन करने के लिए 5 विकल्प हैं, हालाँकि आदर्श रूप से केवल 3, क्योंकि दो विकल्पों में केवल गोलाई हटा दी जाती है।

इसलिए, मैं केवल थंबनेल और श्रेणियों की सूची के लिए सीएसएस शैलियाँ दिखाऊंगा।

पोर्टफोलियो-श्रेणी (मार्जिन-बॉटम:30px;)
.पोर्टफोलियो-श्रेणी (
प्रदर्शन:इनलाइन;
मार्जिन-दाएं:10px;
}
.छवि-ब्लॉक(
प्रदर्शन क्षेत्र;
स्थिति: सापेक्ष;
}
.इमेज-ब्लॉक img (
बॉर्डर: 1px ठोस #d5d5d5;
सीमा-त्रिज्या: 4px 4px 4px 4px;
पृष्ठभूमि:#FFFFFF;
पैडिंग:10px;
}
.इमेज-ब्लॉक img: होवर (
बॉर्डर: 1px ठोस #A9CF54;
बॉक्स-छाया:0 0 5px #A9CF54;
}
.पोर्टफोलियो-क्षेत्र ली (
नाव छोड़ी;
मार्जिन: 0 12px 20px 0;
ओवर फलो हिडेन;
चौड़ाई: 245px;
पैडिंग:5px;
}
.होम-पोर्टफोलियो-टेक्स्ट (मार्जिन-टॉप:10px;)
li.active a (पाठ-सजावट:रेखांकित; )

सिद्धांत रूप में, शैलियों के साथ सब कुछ स्पष्ट होना चाहिए। श्रेणियों को पंक्तिबद्ध बनाने के लिए, डिस्प्ले प्रॉपर्टी को इनलाइन पर सेट किया जाता है। छवि को एक रूपरेखा का प्रभाव देने के लिए, पृष्ठभूमि रंग (सफ़ेद) और पैडिंग को 10 पिक्सेल पर सेट करें। सूची आइटम का आकार .portfolio-area li में सेट किया गया है।

jQuery

और अंत में, सबसे महत्वपूर्ण बात यह है कि पूरा पाठ किस लिए है। यह jQuery कोड है. आइए चित्रों को श्रेणी के अनुसार फ़िल्टर करके प्रारंभ करें।

// पोर्टफोलियो-क्षेत्र के सभी चाइल्ड तत्वों का चयन करें और एक वेरिएबल में लिखें
var $data = $(''पोर्टफोलियो-क्षेत्र'').क्लोन();

$(''पोर्टफोलियो-श्रेणी ली'').क्लिक करें(फ़ंक्शन(ई) (
$('फ़िल्टर ली').removeClass('सक्रिय');

Var फ़िल्टरक्लास=$(यह).attr("class").split(" ").slice(-1);

यदि (फ़िल्टरक्लास == "सभी") (
var $filteredData = $data.find('portfolio-item2');
) अन्य (
var $filteredData = $data.find('portfolio-item2');
}
$('पोर्टफोलियो-क्षेत्र').quicksand($filteredData, (
अवधि: 600,
ऊंचाई समायोजित करें: "ऑटो"
), समारोह () (

लाइटबॉक्सफ़ोटो();
});
$(यह).addClass("सक्रिय");
विवरण झूठा है;
});

क्लोन() विधि और एक चयनकर्ता का उपयोग करके, हम .portfolio-क्षेत्र के सभी चाइल्ड तत्वों का चयन करते हैं और उन्हें $data वेरिएबल में लिखते हैं। इसके बाद, हम श्रेणियों में से किसी एक पर क्लिक को ट्रैक करते हैं, .portfolio-category वर्ग के साथ सूची का li तत्व। हम रिमूवक्लास ("सक्रिय") को हटाकर सभी श्रेणियों को निष्क्रिय कर देते हैं, यदि ऐसा नहीं किया जाता है, तो समय के साथ सभी श्रेणियां सक्रिय हो जाएंगी और फ़िल्टर करना बंद हो जाएगा।

चूँकि हम एक सूची तत्व पर क्लिक करते हैं, इस चयनकर्ता में एक सूची तत्व होता है, अर्थात, li, इससे हम वर्ग विशेषता का मान लेते हैं और विभाजन विधि का उपयोग करके हम वर्ग के नाम को कई भागों में विभाजित करते हैं, सीमा एक स्थान है (अर्थात यदि कक्षा "सभी सक्रिय" थी तो विभाजन के बाद हमें "सभी" और "सक्रिय" की एक सरणी मिलती है)। और फिर स्लाइस विधि का उपयोग करके, हम सरणी के पहले तत्व (हमारे मामले में, "सभी") का चयन करते हैं, और परिणामी परिणाम को फ़िल्टरक्लास वेरिएबल में लिखते हैं। यदि कोई स्थान नहीं है, तो कक्षा का नाम नहीं बदलेगा।

इसके बाद, हम जाँचते हैं कि क्या फ़िल्टरक्लास वेरिएबल में स्ट्रिंग all शामिल है, फिर .find विधि का उपयोग करके हम $data सरणी से पोर्टफोलियो-आइटम2 वर्ग के सभी तत्वों का चयन करते हैं, जिसे हमने ऊपर देखा था। चयनित तत्व (और ये सूची के सभी तत्व हैं, यानी सभी चित्र) फ़िल्टर किए गए डेटा चर में रखे गए हैं।

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

और अंततः, हम परिणामी वेरिएबल को jquery क्विकसैंड लाइब्रेरी में पास करते हैं, जो छवियों को फ़िल्टर करता है। यह फ़िल्टर करने के लिए है.

अब, जहां तक ​​पॉप-अप विंडो में छवि को बड़ा करने की बात है। यहां सब कुछ बहुत सरल है.

JQuery("a").prettyPhoto((
एनीमेशनस्पीड: "तेज़",
स्लाइड शो: 5000,
थीम: "फ़ेसबुक",
show_title: ग़लत,
ओवरले_गैलरी: ग़लत
});

जिस लिंक की rel विशेषता BeautifulPhoto से शुरू होती है, उस पर क्लिक को ट्रैक किया जाता है। फिर प्रीटीफ़ोटो लाइब्रेरी चलन में आती है और छवि चमत्कारिक रूप से बड़ी हो जाती है। वैसे, हम भी कई पैरामीटर पास कर रहे हैं।' जैसे एनीमेशन की गति तेज है, स्लाइड शो में 5 सेकंड की देरी है, फेसबुक डिजाइन थीम (कुल 5 थीम हैं, वे छवियों/सुंदरफोटो फ़ोल्डर में स्थित हैं), और हम चित्र का नाम दिखाने पर भी रोक लगाते हैं और माउस घुमाने पर चित्र को बड़ा करना।

नमस्ते! आज हम शायद सबसे अच्छे मुफ्त फोटो गैलरी, वीडियो और फोटो स्लाइडर के बारे में बात करेंगे, चलो "फोटो फ्रेम" के बारे में बात करते हैं। इस तथ्य के बावजूद कि स्क्रिप्ट को 2 वर्षों तक समर्थित नहीं किया गया है और लेखक ने इसी तरह के विषय पर एक परियोजना पर स्विच किया है, यह बहुत अच्छा काम करता है और आंख को प्रसन्न करना जारी रखता है।

मुख्य लाभ (+)

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

विपक्ष (-)

• उपयोगकर्ता समर्थन का अभाव. आपकी समस्या का समाधान या सुधार किये जाने की संभावना लगभग शून्य है। हाँ, यह बुरा है, लेकिन घातक नहीं।
फोटोरामा को जोड़ने का पहला विकल्प

यह कनेक्शन विकल्प सबसे सरल है, लेकिन सर्वोत्तम नहीं है, इसका उपयोग केवल तभी किया जाना चाहिए जब आपको साइट के अधिकांश पृष्ठों पर गैलरी प्रदर्शित करने की आवश्यकता हो। इस विकल्प का लाभ CDN का उपयोग है.

• jQuery के लिए जाँच की जा रही है। साइट के स्रोत कोड पर जाएं (कीबोर्ड शॉर्टकट Ctrl + U) → इस पंक्ति की तरह कुछ खोजने का प्रयास करें: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

  अपनी खोज को आसान बनाने के लिए, Ctrl + F का उपयोग करें। यदि प्रतिष्ठित लाइन वहां नहीं है, तो आपको jQuery कनेक्ट करना होगा। वर्डप्रेस पर, यह नीचे दिए गए कोड को थीम की फ़ंक्शन फ़ाइल (functions.php) में पेस्ट करके किया जा सकता है। वास्तव में, इस स्क्रिप्ट का उपयोग तब किया जाता है जब jQuery के विभिन्न संस्करणों के बीच टकराव होता है और यह निम्नलिखित योजना के अनुसार काम करता है: यह पहले से पंजीकृत jQuery को हटा देता है, एक नया पंजीकृत करता है, और स्क्रिप्ट प्रदर्शित करता है। jQuery लाइब्रेरी के वर्तमान संस्करण यहां पाए जा सकते हैं।

  आप बस इस पंक्ति को और के बीच सम्मिलित कर सकते हैं:

• हम fotorama.css और fotorama.js को जोड़ते हैं। और टैग के बीच निम्नलिखित कोड डालें, वर्डप्रेस में यह थीम हेडर फ़ाइल (हेडर.php) में किया जाता है।
• यह पहली विधि का उपयोग करके गैलरी को कनेक्ट करना पूरा करता है। इसका उपयोग कैसे करें यह "सीधे गैलरी बनाना" अनुभाग में लिखा गया है।
दूसरा कनेक्शन विकल्प [शॉर्टकोड + ऑटोऑप्टिमाइज़]

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

• jQuery के लिए जाँच की जा रही है। पहले विकल्प की तरह, ऊपर देखें।
• फोटो फ्रेम फ़ाइलें डाउनलोड करें → अनपैक करें → साइट के रूट में एक अलग फ़ोल्डर में अपलोड करें।
• एक शॉर्टकोड बनाने के लिए, नीचे दिए गए कोड को थीम फ़ंक्शन फ़ाइल (functions.php) में डालें, फ़ाइलों के लिंक को अपने स्वयं के..js"> " में बदलें; ) add_shortcode("फोटो","sd");
• अब आर्टिकल लिखते समय अंत में शॉर्टकोड डालें
सीधे गैलरी बनाना

गैलरी को HTML कोड का उपयोग करके प्रदर्शित किया जाता है कंटेनर सी क्लास = "फोटोरामा", कंटेनर में छवि आउटपुट कोड होता है या छवि से लिंक करें . वर्डप्रेस इंजन का उपयोग करके लेख लिखते समय, संपादक को टेक्स्ट मोड में स्विच करें और कंटेनर c class='fotorama' दर्ज करें।

यह इस तरह दिख रहा है:



या इस तरह (लिंक की संख्या वैकल्पिक है):

1 3 4

फ़ोटोरामा सेटिंग्स के उदाहरण कंटेनर आयाम

फोटो फ्रेम ब्लॉक का आकार पहली छवि का आकार है, अन्य छवियों को पहले के अनुपात में बढ़ाया जाता है। इस स्थिति को ठीक करने के लिए, आप आयामों को मैन्युअल रूप से निर्दिष्ट कर सकते हैं।



अन्य सेटिंग्स भी हैं:

डेटा-चौड़ाई = "98%" // सापेक्ष चौड़ाई डेटा-अनुपात = "800/600" // पहलू अनुपात डेटा-मिनविड्थ = "420" // मिनट। चौड़ाई डेटा-मैक्सविड्थ = "900" // अधिकतम। चौड़ाई डेटा-न्यूनतम ऊंचाई='320' // मिनट। ऊंचाई डेटा-अधिकतम ऊंचाई = "100% // सापेक्ष अधिकतम ऊंचाई डेटा-ऊंचाई = "100% // सापेक्ष ऊंचाई

लघुचित्र

Data-nav='thumbs' थंबनेल के लिए ज़िम्मेदार है



लेकिन यह विधि बहुत प्रभावी नहीं है, क्योंकि स्क्रिप्ट को थंबनेल उत्पन्न करने के लिए सभी फ़ोटो को एक साथ लोड करना पड़ता है, इसलिए चित्रों की छोटी प्रतियां पहले से तैयार करना अधिक तर्कसंगत होगा। वर्डप्रेस स्वचालित रूप से थंबनेल बनाता है, जिसका हम उपयोग करेंगे। थंबनेल का लिंक पाने के लिए, फ़ाइल नाम में -70x70 जोड़ें (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/ 11/27ltl9eRXk- 70x70.jpg).



डिफ़ॉल्ट रूप से, थंबनेल 64 × 64 है। आप डेटा-थंबविड्थ (चौड़ाई) और डेटा-थंबहाइट (ऊंचाई) का उपयोग करके इस पैरामीटर को समायोजित कर सकते हैं। यदि आप चाहते हैं कि थंबनेल का अपना आकार हो, तो थंबनेल फ़ाइल के लिए चौड़ाई और ऊंचाई पैरामीटर सेट करें:



HTML कोड + फ़ोटोरामा

फोटोफ़्रेम HTML और CSS को पूरी तरह से संसाधित करता है, जो स्क्रिप्ट की कार्यक्षमता को महत्वपूर्ण रूप से विस्तारित करता है। लिंक, ब्लॉक, टेबल, पैराग्राफ के साथ काम करें, सीएसएस लिखें और भी बहुत कुछ। नीचे गैलरी के काम के कुछ उदाहरण दिए गए हैं। यदि दृश्य भाग प्रदर्शित नहीं होता है, तो "परिणाम" बटन पर क्लिक करें।

उदाहरण दिखाएँ/छिपाएँ

CodePen पर इवानोव क्लिम (@DreamerKlim) का पेन ooppwb देखें।

CodePen पर इवानोव क्लिम (@DreamerKlim) का पेन aVEEVb देखें।

पूर्ण स्क्रीन मोड data-allowfullscreen='true' //ब्राउज़र विंडो में data-allowfullscreen='native' //संपूर्ण मॉनिटर पर

डेटा-फ़ुल के माध्यम से पूर्ण स्क्रीन मोड के लिए एक अलग बड़ी छवि जोड़ना संभव है:



अन्यडेटा-ऑटोप्ले = "सही" //ऑटोप्ले डेटा-ऑटोप्ले = "3000" //एमएस डेटा-कैप्शन में स्लाइड के बीच अंतराल = "एक" // चित्रों पर टिप्पणियाँ डेटा-कीबोर्ड = "सही" //तीर नेविगेशन डेटा-शफ़ल = "सही" // विभिन्न क्रम में छवियां डेटा-नेवपोजिशन = "शीर्ष" // शीर्ष डेटा-लूप पर थंबनेल = "सही" // चक्रीय स्क्रॉलिंग आइए सब कुछ कनेक्ट करने और एक वीडियो जोड़ने का प्रयास करें "कुछ टिप्पणी 1" > "कुछ टिप्पणी 2" > अपना पसंदीदा काम ढूंढने के लिए