मुखपृष्ठ » टूलकिट » माध्यम की तरह छवियाँ ज़ूम कैसे करें

    माध्यम की तरह छवियाँ ज़ूम कैसे करें

    ब्लॉगिंग प्लेटफ़ॉर्म माध्यम एक का उपयोग करता है कस्टम छवि जूमिंग प्रभाव उनके ब्लॉग पृष्ठों पर। जब भी उपयोगकर्ता एक छवि पर क्लिक करता है तो यह स्वचालित रूप से एक बड़े आकार में ज़ूम हो जाएगा.

    यह एक महान प्रभाव है और निश्चित रूप से मध्यम से अद्वितीय है, लेकिन यह कभी ऐसा कुछ नहीं था जिसे आसानी से कॉपी किया जा सके.

    अब, के साथ MediumLightbox स्क्रिप्ट, यह पहले से कहीं ज्यादा आसान है। यह जेएस स्क्रिप्ट किसी भी वेबसाइट या ब्लॉग में जोड़ने के लिए हल्का और आसान है.

    यदि आप यह देखना चाहते हैं कि यह कैसे काम करता है तो आप यहां जा सकते हैं लाइव डेमो पेज निर्माता डेविडide कैलिगनानो द्वारा होस्ट किया गया.

    उन्होंने सटीक संक्रमण और कस्टम एनीमेशन प्रभाव को समाप्त करते हुए कुछ समय बिताया मीडियम की इमेज जूम से मिरर इमेज बनाएं. पूरी लाइब्रेरी है शुद्ध जावास्क्रिप्ट में लिखा है, इसलिए यह किसी भी 3 पर भरोसा नहीं करता हैतृतीय पार्टी स्क्रिप्ट जैसे कि jQuery.

    आपको इसे स्थापित करने के लिए थोड़ा जेएस जानने की आवश्यकता होगी, लेकिन आपको निश्चित रूप से विशेषज्ञ होने की आवश्यकता नहीं है.

    प्रत्येक छवि ले सकते हैं data- * विशेषताएँ पूर्ण आकार और चौड़ाई की स्थापना के लिए, जो सभी हैं गतिशील रूप से खींचा गया लाइटबॉक्स प्लगइन से। सेटअप कोड बहुत सरल है और यह कर सकता है छवियों को स्वयं लक्षित करें, या जैसे कंटेनर

    तत्त्व.

    यहां एकल कोड स्निपेट है जिसे आपको प्लगइन चलाने की आवश्यकता है:

     MediumLightbox ( 'figure.zoom प्रभाव'); 

    फ़ंक्शन के अंदर, आप करेंगे एक चयनकर्ता पास करें सभी तत्वों के लिए (उदा.

    ) उसके साथ .ज़ूम प्रभाव कक्षा। यह वर्ग है विशेष रूप से परिभाषित MediumLightbox स्टाइलशीट में, इसलिए अपने पृष्ठ पर भी इसका उपयोग करना सबसे अच्छा है.

    और, एक बार सेट होने के बाद, आप सभी सेट हो जाते हैं!

    अपने पृष्ठ सामग्री क्षेत्र में, आप सभी छवियों को एक में लपेट सकते हैं

    टैग इस वर्ग का उपयोग करते हुए। वे स्वतः ही इस प्यारे मध्यम क्लिक-टू-ज़ूम प्रभाव को प्राप्त करेंगे डेस्कटॉप और मोबाइल उपयोगकर्ताओं दोनों के लिए.

    इस स्क्रिप्ट की एक प्रति डाउनलोड करने और आरंभ करने के लिए, बस मुख्य GitHub रेपो पर जाएँ। यहाँ, आप भी पाएंगे कोड स्निपेट्स के साथ प्रलेखन आप तेजी से सेट होने के लिए कॉपी कर सकते हैं.