अपने वेब पेज पर jfMagnify के साथ आवर्धक प्रभाव जोड़ें

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

अगर आप कर सके तो क्या एक आवर्धक प्रभाव जोड़ें अपने वेब पेज के हर हिस्से के लिए? का शुक्र है jfMagnify, आप ऐसा कर सकते हैं.

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

ध्यान दें कि यह प्लगइन थोड़ा भारी महसूस कर सकता है क्योंकि यह दो निर्भरता पर निर्भर करता है: नियमित jQuery तथा jQuery यूआई. ये दोनों आवश्यक हैं jfMagnify ठीक से काम करने के लिए। उल्लेख करने के लिए नहीं वास्तविक jfMagnify स्क्रिप्ट आपको अपने पृष्ठ पर शामिल करना होगा.

सेटअप थोड़ा मुश्किल है क्योंकि आप केवल आवर्धित तत्वों को लक्षित कर सकते हैं एक कंटेनर के भीतर. यदि आप पूरे पृष्ठ को लक्षित करना चाहते हैं तो आपको करना होगा अपनी पूरी वेबसाइट पर एक क्लास शामिल करें.

यहाँ कैसे है jQuery की एकल पंक्ति ऐसा लगेगा:

 $ ( "। आवर्धन") jfMagnify ()।; 

यह लक्ष्य अंदर सभी तत्व .बढ़ाना पात्र जो आमतौर पर ए div तत्त्व.

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

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

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

GitHub पर डॉक्स पर एक नज़र डालें कि आप क्या सोचते हैं। और, आप भी कर सकते हैं इंटरफ़ेस का पूर्वावलोकन करें यदि आप लाइब्रेरी को स्थापित करने से पहले देखना चाहते हैं तो CodePen पर.