BaguetteBox.js के साथ उत्तरदायी और सुंदर पूर्ण पृष्ठ लाइटबॉक्स बनाएं

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

लेकिन, उपयोग करने के लिए मेरे पसंदीदा नए प्लगइन्स में से एक है baguetteBox.js, जावास्क्रिप्ट डेवलपर Marek Grzybek द्वारा बनाया गया.

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

पुस्तकालय कोई निर्भरता नहीं है, इसलिए आप इसे jQuery, Zepto, या किसी अन्य चीज़ के बिना चला सकते हैं। यह है वास्तव में सरल सेटअप के साथ शुद्ध जावास्क्रिप्ट पुस्तकालय.

यह करने के लिए है मोबाइल उपकरणों पर पूरी तरह से काम करते हैं, इसलिए यह डेस्कटॉप और लैपटॉप पर डिफ़ॉल्ट व्यवहार के साथ, स्वाइप और टैप का समर्थन कर सकता है। यह कुछ पूर्ण स्क्रीन दीर्घाओं में से एक है एक पूर्ण मोडल प्रभाव के साथ-साथ मोबाइल इंटरैक्शन का समर्थन करें.

इसकी जाँच पड़ताल करो डेमो पेज यह देखने के लिए कार्रवाई में रहते हैं। इसमें पूरी तरह से चित्रित गैलरी है, साथ में इसे प्राप्त करने के लिए आवश्यक कोड की एक पंक्ति:

 baguetteBox.run ( '। baguetteBoxOne'); 

तो यह कक्षा के साथ एक कंटेनर तत्व को लक्षित करता है .baguetteBoxOne और पूरी गैलरी उस पर काम करती है.

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

लेकिन, यह वास्तव में एक कंटेनर तत्व और कुछ बुनियादी छवि तत्वों से परे जाने के लिए ज्यादा नहीं लेता है.

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

अधिक जानने के लिए, baguetteBox.js मुख्य पृष्ठ पर जाएं और आप ट्विटर @ @imosi पर निर्माता के साथ अपने विचार भी साझा कर सकते हैं.