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

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

याद दिला दूँ कि हमारे पास पहले से Views और Views_slideshow मॉड्यूल स्थापित हैं।

तो चलिए, मैं इस लेख के साथ कुछ एरो (arrow) आइकन जोड़ रहा हूँ — अब हम इन्हें अपने स्लाइडशो में इस्तेमाल करेंगे। सबसे पहले हमें स्लाइड्स के लिए टेक्स्ट स्विचर जोड़ना होगा।

अब हमारे स्लाइड स्विचर पर “Next” और “Previous” बटन दिखाई देंगे।

इन बटनों को व्यवस्थित करने का विचार यह है कि हम CSS का उपयोग करके next और previous लिंक के लिए background इमेज सेट करें और उन्हें CSS की मदद से मनचाही जगह पर ले जाएँ।

इसके लिए हमें Firefox का एक ऐड-ऑन चाहिए — FireBug। यह CSS के साथ काम करने के लिए बहुत सुविधाजनक उपकरण प्रदान करता है। नीचे दिए गए उदाहरण में आप देख सकते हैं कि FireBug के माध्यम से स्लाइडशो स्विचर के लिंक कैसे दिखते हैं:

हमें इन तत्वों के id जानने की आवश्यकता होगी — इन्हीं id के माध्यम से हम CSS में स्टाइल सेट करेंगे। इसके अलावा, हमें अपने एरो चित्र (arrow images) को अपनी थीम की images फ़ोल्डर में रखना होगा।

अपनी थीम की images डायरेक्टरी में बाएँ और दाएँ तीर की फाइलें कॉपी करें।

अब हम अपनी थीम की style.css में CSS जोड़ते हैं। उदाहरण के तौर पर कोड इस तरह दिखेगा (अपने टेम्पलेट के अनुसार मान बदलें):

a#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png'); /* बाएँ तीर की इमेज */
    width: 30px; /* तीर की चौड़ाई */
    height: 0px; /* ऊँचाई 0 रखें */
    padding-top: 30px; /* ऊपर का पैडिंग, चौड़ाई के बराबर */
    position: relative;
    top: 0px; /* ऊपर से दूरी */
    overflow: hidden;
    z-index: 5; /* स्लाइडशो के ऊपर दिखाएँ */
    display: block;
}

a टैग लिंक को दर्शाता है, और # चिन्ह इंगित करता है कि हम CSS में किसी id सेलेक्टर का उपयोग कर रहे हैं।

Next बटन के लिए CSS थोड़ा अलग होगा:

a#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 30px;
    height: 0px;
    padding-top: 30px;
    position: relative;
    top: 0px;
    left: 30px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

अब “Pause” लिंक को पूरी तरह हटा दें:

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

Padding और position के मानों को FireBug के माध्यम से समायोजित करें और उन्हें अपनी style.css फ़ाइल में सहेजें।

अंतिम CSS उदाहरण इस प्रकार दिखता है:

#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: -55px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}
#views_slideshow_singleframe_controls_view_slideshow-block_1 {
    height: 0px;
}

अब हमारा बैनर तैयार है! अगले भाग में हम jQuery-कैरोसेल बनाएंगे।