यूँ तो आप सभी के ब्लॉग बहुत ख़ूबसूरत हैं लेकिन यदि उस पर एक स्लाइडर लग जाये तो उसकी सुंदरता में और भी निखार आ जायेगा। इसी उद्देश्य से मैं आपके लिए लाया हूँ पहला फोटो स्लॉइडर, जो बेहद ही ख़ूबसूरत है। यह एक ऑटो स्लाइडर है जो स्वत: ही तरह-तरह के इफ़ेक्ट के साथ फोटो बदलता रहता है। ऐसे और भी सरल स्लॉइडर तकनीक दृष्टा ब्लॉग पर आगे पेश किये जायेगें।
फ़ोटो स्लॉइडर को अपने ब्लॉग/साइट से जोड़ना | Adding HTML5 Image Slider to blog or website
1. सबसे पहले अपने ब्लॉग टेम्पलेट को बदलाव/एडिट करने के लिए खोलिए
– यदि आप नहीं जानते हैं कि कैसे ब्लॉग टेम्पलेट बदलाव/एडिट करते हैं, तो यहाँ क्लिक कीजिए। भविष्य में इसे पुन: प्रयोग के लिए बुकमार्क भी कर लें।
2. अब टेम्पलेट में <head> के नीचे jQuery जोड़नी होगी। यदि आपने पहले ही किसी विजेट के लिए इसे ब्लॉग टेम्पलेट में प्रयोग किया है तो इसे अपडेट करें या फिर इसे दुबारा टेम्पलेट में न डालें।
नयी jQuery वर्शन 1.8.1 का लिंक:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'/>
3. अब इसके नीचे फोटो स्लॉइडर जावास्क्रिप्ट (Image Slider Javascript) कोड पेस्ट करें
<script src='http://techprevue.googlecode.com/files/html5_simple_slider.js'/>
यह उदाहरण आपको स्पष्ट करेगा कि दोनों कोड कहाँ और कैसे पेस्ट करें?
<head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'/> <script src='http://techprevue.googlecode.com/files/html5_simple_slider.js'/>
4. इसके बाद आपको टेम्पलेट में </head> के ठीक ऊपर यह कोड यह कोड पेस्ट करना होगा।
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_slideshow_html5_simple").webwidget_slideshow_html5_simple({
slideshow_transition_effect: 'Mosaic,Wipe_from_horizontal_blind,Wipe_from_vertical_blind,Wipe_from_vertical_center,Mosaic,Wipe_from_horizontal_center,Wipe_to_horizontal_center,Wipe_to_vertical_center,Mosaic,Wipe_from_bottom_to_top,Wipe_from_top_to_bottom,Wipe_from_right_to_left',
slideshow_time_interval: '4000',
slideshow_window_width: '600',
slideshow_window_height: '400',
slideshow_background_color: '#FFF',
slideshow_border: 'transparent solid 5px',
text_effect: 'text_fade'
});
});
</script>
विशेष:
उपरोक्त कोड में लाल से दर्शाया गया 600 फोटो की चौड़ाई है और 400 फोटो की ऊँचाई है। इसे आप अपने टेम्पलेट डिज़ाइन के अनुसार बदल सकते हैं।
5. अब अपने टेम्पलेट को सहेज दीजिए
6. अब लेआउट (Layout section) में जाकर एक HTML/Javascript गैजेट जोड़िए
7. जिसके अन्दर आपको यहाँ नीचे दिया गया स्लॉइडर कोड पेस्ट करना है।
<div id="webwidget_slideshow_html5_simple"> <ul> <li><a href="#Link"><img src="/images/slideshow_IMAGE_1.jpg" alt="Title 1" /></a></li> <li><a href="#Link"><img src="/images/slideshow_IMAGE_2.jpg" alt="Title 2" /></a></li> <li><a href="#Link"><img src="/images/slideshow_IMAGE_3.jpg" alt="Title 3" /></a></li> <li><a href="#Link"><img src="/images/slideshow_IMAGE_4.jpg" alt="Title 4" /></a></li> <li><a href="#Link"><img src="/images/slideshow_IMAGE_5.jpg" alt="Title 5" /></a></li> <li><a href="#Link"><img src="/images/slideshow_IMAGE_6.jpg" alt="Title 6" /></a></li> <li><a href="#Link"><img src="/images/slideshow_IMAGE_7.jpg" alt="Title 7" /></a></li> <li><a href="#Link"><img src="/images/slideshow_IMAGE_8.jpg" alt="Title 8" /></a></li> <li><a href="#Link"><img src="/images/slideshow_IMAGE_9.jpg" alt="Title 9" /></a></li> <li><a href="#Link"><img src="/images/slideshow_IMAGE_10.jpg" alt="Title 10" /></a></li> </ul> </div>
विशेष: उपरोक्त कोड में 3 चीज़ें हैं जिनसे आप इस फोटो स्लाइडर में अपनी मनपसंद फोटो, सम्बंधित शीर्षक और सम्बंधित पोस्ट का लिंक जोड़ सकते हैं। जिन्हें उपरोक्त स्लाइडर कोड में आपको बदलना है।
आइए इसे समझते हैं –
यह स्लाइडर की एक फोटो का लिंक है, आप जितने चाहें ऐसे लिंक प्रयोग कर सकते हैं। 5 से 10 लिंक तक का प्रयोग उचित रहता है।
<li><a href="#Link"><img src="/images/slideshow_IMAGE_1.jpg" alt="Title 1" /></a></li>
नीचे बताया जा रहा है कि इस लिंक में कैसे अपने अनुसार परिवर्तन किये जाने चाहिए।
क्या और कैसे प्रयोग करना है?
#Link ¬> सम्बंधित पोस्ट का लिंक, e.g. http://yourblog.blogspot.in/2012/09/post-title.html
/images/slideshow_IMAGE_1.jpg ¬> स्लाइडर में जो फोटो दिखानी है उसका का लिंक, e. g. http://yourpostimage.host.com/image.jpg
Title 1 ¬> सम्बंधित पोस्ट का शीर्षक, e.g. फोटो स्लाइडर (HTML5 Image Slider) – 1, ब्लॉगर के लिए
आशा है आपको यह पसंद आया होगा। यदि हाँ तो हमारा फेसबुक पेज ज़रूर पसंद कीजिए।