3.5.5. Views Slideshow - Views के माध्यम से jQuery स्लाइडशो और कैरोसेल प्रदर्शित करना।

Drupal 7 में विभिन्न jQuery स्लाइडशो को Drupal के साथ एकीकृत (integrate) करने के लिए कई मॉड्यूल उपलब्ध थे। इनमें से सबसे लोकप्रिय और सुविधाजनक मॉड्यूल था Views Slideshow।

Drupal 7 संस्करण में Views Slideshow मॉड्यूल की एक कमी थी — यह responsive नहीं था। अब Drupal 8 में इसे ठीक कर दिया गया है, इसलिए हम इस ट्यूटोरियल में Views Slideshow पर आधारित एक स्लाइडशो बनाएंगे।

मॉड्यूल और लाइब्रेरी इंस्टॉल करना

सबसे पहले, आपको Views Slideshow मॉड्यूल डाउनलोड और इंस्टॉल करना होगा। साथ ही Views Slideshow Cycle सबमॉड्यूल को भी सक्षम करें:

https://www.drupal.org/project/views_slideshow

हमें कुछ अतिरिक्त jQuery libraries की भी आवश्यकता होगी, जिन्हें libraries फ़ोल्डर में रखना होगा। यदि यह फ़ोल्डर मौजूद नहीं है, तो इसे साइट की रूट डायरेक्टरी में बनाएं:

/libraries/jquery.hoverIntent/jquery.hoverIntent.js

https://github.com/briancherne/jquery-hoverIntent

/libraries/jquery.cycle/jquery.cycle.all.js

http://malsup.github.io/jquery.cycle.all.js

/libraries/json2/json2.js

https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js

Views बनाना

अब जब लाइब्रेरीज़ जुड़ गई हैं, हम Views Slideshow के माध्यम से आउटपुट करने के लिए एक View बनाएंगे।

शुरू करने के लिए, एक ऐसा Content Type बनाएं जिसमें इमेज फ़ील्ड हो। उदाहरण के लिए, यहाँ “Gallery” कंटेंट टाइप और “Photo” फ़ील्ड है:

अब एक नया View बनाएँ और Display Format में “Views Slideshow (Slideshow)” चुनें:

अब हमें स्लाइडशो के लिए विस्तृत सेटिंग्स मिलेंगी। Format कॉलम में “Settings” पर क्लिक करें ताकि हम Views Slideshow मॉड्यूल की क्षमताएँ देख सकें।

मुख्य सेटिंग्स

Row class: डिफ़ॉल्ट रूप से “views-row” होता है, जो प्रत्येक स्लाइड के लिए लागू होता है। आप यहाँ अपनी कस्टम CSS क्लास दे सकते हैं।

Style / Skin: यहाँ आप स्लाइडशो की डिजाइन थीम चुन सकते हैं। प्रारंभ में केवल “default” उपलब्ध होती है, लेकिन आप अतिरिक्त डिज़ाइन मॉड्यूल भी जोड़ सकते हैं।

https://www.drupal.org/node/909020

Slides सेटिंग्स

Type of slideshow: यहाँ आप jQuery प्लगइन चुन सकते हैं जिसके माध्यम से स्लाइडशो काम करेगा, जैसे कि FlexSlider Views Slideshow।

Effect: स्लाइड्स के बीच बदलाव के लिए विभिन्न इफेक्ट्स चुन सकते हैं। “scrollHorz” इफेक्ट सेट करने पर यह एक jQuery कैरोसेल जैसा दिखेगा।

Timer delay: स्लाइड्स के बीच का समयांतराल।

Speed: स्लाइड बदलने की गति।

Initial slide delay offset: पहली स्लाइड के पहले की देरी का समय, ताकि यूज़र पहली स्लाइड देख सके।

Random: स्लाइड्स को यादृच्छ (random) क्रम में दिखाना।

Action सेटिंग्स

यहाँ आप स्लाइडशो को पॉज़ करने और उसकी ऊँचाई (height) नियंत्रित करने की सेटिंग कर सकते हैं।

• Pause On Click: स्लाइड पर क्लिक करने पर स्लाइडशो रुक जाएगा।
• Pause on mouse click: क्लिक करने पर स्लाइडशो को रोकना।
• Start Slideshow Paused: स्लाइडशो तब तक शुरू नहीं होगा जब तक यूज़र माउस से hover या क्लिक न करे।
• Start On Last Slide Viewed: यूज़र को वही स्लाइड दोबारा दिखाना जो उसने पहले देखी थी।
• Pause When the Slideshow is Not Visible: जब स्लाइडशो स्क्रीन पर न हो, तो उसे रोक देना।
• End slideshow after last slide: अंतिम स्लाइड के बाद स्लाइडशो बंद हो जाएगा।

Make the slide window height fit the largest slide: सभी स्लाइड्स की ऊँचाई एक समान न होने पर यह सेटिंग उपयोगी है। यह कंटेंट को हिलने से रोकती है।

Items per slide: यदि आप “1” की जगह अधिक स्लाइड्स प्रति पेज दिखाना चाहते हैं, तो इसे कैरोसेल जैसा रूप दे सकते हैं। “scrollHorz” इफेक्ट के साथ यह पूर्ण कैरोसेल जैसा लगेगा।

Wait for all slide images to load: सभी इमेज लोड होने तक स्लाइडशो आगे नहीं बढ़ेगा। यदि आपकी इमेज बहुत बड़ी हैं, तो इसे डिसेबल करना बेहतर होगा।

Internet Explorer Tweaks

यदि आपके स्लाइडशो में टेक्स्ट या बैकग्राउंड कलर नहीं है, तो ये सेटिंग्स आवश्यक नहीं हैं। ये केवल IE ब्राउज़र पर प्रभाव डालती हैं।

Widgets और Controls

Widgets: आप स्लाइड नेविगेशन बटन ऊपर या नीचे दोनों स्थानों पर दिखा सकते हैं।

Controls: “Next” और “Previous” टेक्स्ट लिंक्स शामिल कर सकते हैं। CSS के माध्यम से इन्हें तीरों के रूप में डिज़ाइन किया जा सकता है।

Slide Counter: कुल स्लाइड्स की संख्या और वर्तमान स्लाइड दिखाता है।

Pager: स्लाइडशो के लिए बिंदु (dots) नेविगेशन बनाने की अनुमति देता है। इसके लिए Views में “Result Counter” फ़ील्ड जोड़ें और उसे Pager Field के रूप में उपयोग करें।

अभी आप Views Slideshow का उपयोग करके एक बेसिक स्लाइडशो बनाने का प्रयास करें। यदि कोई समस्या आती है, तो आप टिप्पणियों (comments) में पूछ सकते हैं।