चिनाई काम नहीं कर रही है. हम Pinterest शैली में पोस्ट डिज़ाइन करने के लिए jQuery मेसनरी स्क्रिप्ट का उपयोग करते हैं। jQuery Mansory क्या है?
ब्लॉग अनुभाग में. यह वर्डप्रेस फोटो थीम हमारा उदाहरण होगा, लेकिन आपने संभवतः अन्य वर्डप्रेस साइटों पर jQuery मेसनरी का उपयोग देखा होगा।
jQuery Mansory क्या है?चिनाई को सीएसएस के अतिरिक्त माना जा सकता है, जिसके साथ आप तत्वों को क्षैतिज रूप से व्यवस्थित कर सकते हैं, मॉनिटर की चौड़ाई के आधार पर ऊर्ध्वाधर स्थिति में ले जा सकते हैं। परिणामस्वरूप, विभिन्न ऊंचाइयों के तत्वों के बीच ऊर्ध्वाधर अंतराल कम हो जाता है। यदि आप सीएसएस का उपयोग करके भी ऐसा ही करना चाहते हैं, तो मेरा विश्वास करें, आपको बहुत सिरदर्द होगा।
इस उदाहरण में आप देख सकते हैं कि jQuery मेसनरी उपयोग से पहले और बाद में कैसे काम करती है:
जैसा कि आप परिणाम स्पष्ट रूप से देख सकते हैं, यदि आप सीएसएस फ्लोट: लेफ्ट का उपयोग करते हैं, तो खाली स्थान रह जाते हैं, आपको सीएसएस स्थिति का उपयोग करने की आवश्यकता होती है, जिसे कॉन्फ़िगर करना काफी समस्याग्रस्त है, यह संभव है, लेकिन क्यों, चिनाई इसमें मदद नहीं करेगी।
वर्डप्रेस साइट्स पर jQuery Mansory का उपयोग करनाचिनाई का उपयोग दो मामलों में किया जा सकता है। पहला तब होता है जब जानकारी वाले आपके सभी ब्लॉक समान चौड़ाई के होते हैं, उस स्थिति में आपको स्क्रिप्ट के इस टुकड़े का उपयोग करने की आवश्यकता होती है:
jQuery(document).ready(function($)( $("#content_masonry").masonry(( सिंगलमोड: true )); ));
$("#content_masonry"). चिनाई((सिंगलमोड:सत्य)); } ) ; |
यदि आपके पास विभिन्न चौड़ाई के ब्लॉक हैं, तो आपको निम्नलिखित कोड का उपयोग करना होगा:
jQuery(document).ready(function($)( $("#content_masonry").masonry(( columnWidth: 300 )); ));
jQuery (दस्तावेज़)। तैयार(फ़ंक्शन($)( $("#content_masonry"). चिनाई((स्तंभचौड़ाई: 300)); } ) ; |
जहां columnWidth ग्रिड की चौड़ाई (पिक्सेल में) है। चिनाई इन दो नियमों का पालन करेगी:
पहले तत्व की कुल चौड़ाई 190px और मार्जिन-राइट: 0 है। और दूसरे तत्व की मार्जिन-लेफ्ट: 0 है, सिद्धांत रूप में इन दोनों तत्वों को एक दूसरे को छूना चाहिए। लेकिन चूंकि कॉलमविड्थ 200px पर सेट है, दूसरा तत्व 200px की दूरी पर दिखाई देने लगता है।
यह प्रक्रिया नहीं होगी यदि हमारे पास स्क्रिप्ट में कॉलमविड्थ मान नहीं है और सभी तत्व एक के बाद एक शुरू होते हैं, इसलिए मार्जिन का उपयोग करके उन्हें अलग करना आवश्यक है।
तो jQuery मेसनरी और वर्डप्रेस 3 का चमत्कार..अब थोड़ी सी कोडिंग करते हैं. सबसे पहले, आइए हेडर.php फ़ाइल में आवश्यक jQuery और Masonry लाइब्रेरी शामिल करें। इस कोड को हेडर.php में रखें (आप इसे ऑफ साइट से डाउनलोड कर सकते हैं):
// jQuery कनेक्ट करें