Drupal 7 में स्लाइडशो (Slideshow) और jQuery कैरोसेल (Carousel) बनाना — भाग 1

कई बार हमें अपनी वेबसाइट में कुछ आकर्षक या जीवंत प्रभाव जोड़ने की आवश्यकता होती है — कुछ ऐसा जो साइट को थोड़ा “जीवित” बना दे। Drupal पर बनी डिफ़ॉल्ट साइटें आमतौर पर स्थिर (static) और साधारण दिखती हैं, लेकिन हम चाहते हैं कि वे मौलिक, गतिशील और जीवंत हों। इसके लिए हम ड्रॉपडाउन मेन्यू, डायनामिकली अपडेट होने वाले पेज या साइट हेडर में एक बैनर बना सकते हैं।

इसमें हमें CSS का ज्ञान बहुत मदद करता है — इसकी मदद से हम साइट की रंग योजना और स्टाइल को अनोखा बना सकते हैं। लेकिन Drupal के डिफ़ॉल्ट टेम्पलेट्स का उपयोग करके भी हम साइट को अधिक आकर्षक बना सकते हैं, भले ही वह सबसे परिष्कृत न हो। तो चलिए शुरुआत करते हैं — बैनर से।

पहले बैनर आमतौर पर .gif इमेज या Flash बैनर के रूप में बनाए जाते थे। GIF बैनर एक ही फ़ाइल में कई छवियाँ रखते हैं, जबकि Flash बैनर अधिक सुंदर होते हैं, लेकिन दोनों में समय और संसाधन की खपत अधिक होती है। विशेष रूप से Flash काफी भारी होता है और बहुत अधिक CPU संसाधन लेता है।

JavaScript का उपयोग करके भी बैनर बनाया जा सकता था, लेकिन यह समय लेने वाला था और JavaScript का गहरा ज्ञान आवश्यक था। परंतु jQuery फ्रेमवर्क के आगमन के साथ यह प्रक्रिया काफी आसान और तेज़ हो गई — अब JavaScript का विशेषज्ञ होना जरूरी नहीं है।

हम अपने उसी “प्रयोगात्मक” Drupal साइट पर काम जारी रखेंगे:

सबसे पहले, हमें एक अलग क्षेत्र (region) बनाना होगा जहाँ हम बैनर ब्लॉक जोड़ेंगे।

इसके लिए अपनी थीम की .info फ़ाइल खोलें और क्षेत्रों (regions) की सूची के बाद यह जोड़ें:

regions[content] = Content 
regions[right] = Right sidebar 
regions[left] = Left sidebar 
regions[footer] = Footer

अब बैनर के लिए नया क्षेत्र जोड़ें:

regions[topbanner] = Top banner

अब तय करें कि आपको किस प्रकार का बैनर चाहिए। यदि आप साधारण इमेज स्लाइडर से संतुष्ट हैं, तो हम Views Slideshow मॉड्यूल का उपयोग कर सकते हैं। इस मॉड्यूल के साथ इसके उप-मॉड्यूल Views Slideshow: SingleFrame और Views Slideshow: ThumbnailHover भी इंस्टॉल करें। इनके लिए Views मॉड्यूल आवश्यक है — जो संभवतः आपके पास पहले से है।

Views Slideshow: SingleFrame — एक ब्लॉक में सिंगल-फ्रेम स्लाइडशो प्रदर्शित करता है।

Views Slideshow: ThumbnailHover — छोटे चित्रों (थंबनेल) या स्लाइड शीर्षकों वाले स्लाइडशो के लिए उपयोग होता है।

अब एक नया View बनाएँ और Tags फ़ील्ड में “slideshow” लिखें:

अब View में प्रदर्शित होने वाले Fields जोड़ें। उदाहरण के लिए — कर्मचारी का नाम, पद और फ़ोटो। आप नोड का Title या Body फ़ील्ड भी जोड़ सकते हैं।

Filters सेक्शन में जोड़ें:
सामग्री प्रकाशित = “हाँ”,
सामग्री प्रकार = “सотрудник” (या आपका कंटेंट टाइप, जैसे Page, Story, आदि)।

Sort criteria के रूप में Node: Post date = Descending चुनें।

फिर “Block” डिस्प्ले जोड़ें।

Basic settings में Style: slideshow सेट करें। इसके बाद स्लाइडशो इफेक्ट्स का कॉन्फ़िगरेशन विंडो खुलेगा। यदि यह स्वचालित रूप से नहीं खुलता, तो “Style: Slideshow” के बगल में गियर आइकन (⚙️) पर क्लिक करें।

Slideshow mode: SingleFrame के लिए मुख्य सेटिंग्स:

• Timer delay: स्लाइड बदलने के बीच समय (मिलीसेकंड में)
• Initial slide delay offset: पहली स्लाइड शुरू होने से पहले की देरी
• Speed: स्लाइड परिवर्तन की गति
• Controls: स्लाइड्स के लिए “पिछला/अगला” टेक्स्ट बटन
• Pager: स्लाइड नंबर स्विचर
• Image Counter: वर्तमान स्लाइड नंबर दिखाता है
• Items per slide: एक समय में प्रदर्शित स्लाइड्स की संख्या
• Effect: स्लाइड दिखाने का इफेक्ट

ये मुख्य सेटिंग्स हैं, हालांकि आप अन्य विकल्पों का भी उपयोग कर सकते हैं।

Slideshow mode: ThumbnailHover के लिए:

• Main frame fields: वे फ़ील्ड जो मुख्य स्लाइड में दिखाई देंगी
• Breakout fields: वे फ़ील्ड जो थंबनेल मेन्यू में दिखाई देंगी (जैसे छोटी छवियाँ)

बाकी सेटिंग्स SingleFrame जैसी ही हैं।

अब View को सहेजें। यदि आपने “Block” डिस्प्ले बनाया है, तो इस ब्लॉक को हमने पहले बनाए गए Top banner क्षेत्र में रखें।

बैनर के दृश्य स्वरूप (appearance) को समायोजित करने के लिए अपनी थीम की style.css फ़ाइल में CSS जोड़ें — इसे अपनी रंग योजना के अनुसार अनुकूलित करें।

पाठ के अगले भागों में हम चित्र आधारित बटन, बिना अतिरिक्त मॉड्यूल के jQuery-बैनर और एक jQuery-कैरोसेल बनाएंगे।