एक और jQuery पिक्सेल-टू-पिक्सेल लेआउट प्लगइन

मैंने इस प्लगइन को इस वर्ष के फरवरी में सिर्फ अपने लिए लिखना शुरू किया था, क्योंकि उस समय मुझे ऐसा कुछ नहीं मिला था। अब हब्रायुज़र पहले से ही PixelPerfect और X-Precise जैसे उपकरणों के बारे में जानता है, लेकिन उनमें से प्रत्येक के पास इसके पेशेवरों और विपक्ष हैं, जैसे मेरा।

तो PixLayout में ऐसा क्या खास है?

• सभी एक फाइल में। आप jQuery कनेक्ट करते हैं, इसके बाद प्लगइन फ़ाइल, इसे चलाते हैं और सब कुछ काम करता है। शैलियाँ और HTML पहले से ही शामिल हैं।
• क्रॉस-ब्राउज़र संगतता। pixLayout क्रोम 5+, ओपेरा 10+, फ़ायरफ़ॉक्स 3.6+, IE 7+ ब्राउज़र (छोटे ग्लिट्स के साथ, लेकिन यह अभी भी काम करता है) में काम करता है, साथ ही jQuery के सभी संस्करणों पर 1.3.2 से शुरू होता है
• कार्यक्षमता। प्लगइन आसान सेटअप और बाद के लेआउट के लिए पर्याप्त पैरामीटर प्रदान करता है।

कैसे स्थापित करें और कॉन्फ़िगर करें?

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

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.pixlayout.js"></script> <script type="text/javascript"> $(function(){ $.pixlayout("/path_to_picture/picture.ext"); }); </script> 

महीन ट्यूनिंग के लिए, हम ऑब्जेक्ट को पास करते हैं और संदर्भ को दूसरे पैरामीटर के रूप में निर्दिष्ट करते हैं।

 $.pixlayout({ src: "/img/layout.jpg", opacity: 0.8, top: 50, center: true, clip: true, show: true }, ".wrapper"); 

वेबसाइट और डेमो
अलग डेमो

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

इस प्रक्रिया का वर्णन करने वाला एक छोटा वीडियो है: