How to make a simple slideshow with jQuery

မင်္ဂလာပါ …

ဒီတစ်ခေါက်တော့ seo service website မှာ လုပ်ထားတဲ့ slide show လိုမျိုး ပုံတွေ တစ်ပုံပြီးတစ်ပုံ မှိန်ပြီး ပျောက်ပျောက်သွားအောင် လုပ်တဲ့ သင်ခန်းစာကို သင်ပါမယ်။ ဒီသင်ခန်းစာကို မဖတ်ခင် အောက်ကလင့်ခ်တွေက post တွေကို ဖတ်ပြီး၊ လိုက်လုပ်ကြည့်ဖူးမှ၊ ဒီသင်ခန်းစာကို နားလည်ပါမယ်။

1. What is jQuery? Explained detail.

2. jQuery .hide() function

3. jQuery .slideToggle() tutorials

4. jQuery if else applicable tutorial

ဒါကြောင့် အရင်ဆုံးလုပ်ရမယ့် အလုပ်က desktop ပေါ်မှာ slideshow ဆိုတဲ့ နာမည်နဲ့ folder တစ်ခုဆောက်လိုက်ပါ။ ပြီးရင် အဲဒီ folder ထဲမှာ images ဆိုတဲ့ folder ကို ထပ်ဆောက်လိုက်ပါ။ သေချာအောင် အောက်က ပုံကိုကြည့်ပါ။

ပြီးရင် အဲဒီ http://www.seo.sg ကို သွားပြီးတော့ သူ့ slide show ပေါ်ကို pointer တင်၊ ပြီးရင် right click နှိပ်ပြီးတော့ save image as ကိုရွေးပြီး တစ်ပုံပြီး တစ်ပုံ desktop ပေါ်က ခုန slideshow folder ထဲက images folder ထဲကို ပထမ တစ်ပုံကို 01.jpg ၊ နောက်တစ်ပုံကို 02.jpg ဆိုပြီး နာမည်ပေးပြီး သိမ်းလိုက်ပါ။ အောက်က ပုံကိုကြည့်ပါ။

ပုံနှစ်ပုံရပြီဆိုရင် coding ဘက်ကို ဆက်သွားပါမယ်။ notepad++ ဖွင့်လိုက်ပါ။ ပြီးရင် new file ခေါ်ပြီးတော့

လို့ ရိုက်ထည့်ပြီးတော့ ခုနက desktop ပေါ်က slideshow folder ထဲမှာ index.html ဆိုတဲ့ နာမည်နဲ့ သိမ်းလိုက်ပါ။ ပြီးရင် အဲဒီ index မှာပဲ အဖွင့်နဲ့ အပိတ်ထဲမှာ code နည်းနည်း ထပ်ရေးရပါမယ်။

ဒါက html တည်ဆောက်ပုံပါ။ id ကိုတော့ slideshow ပဲ ဖြစ်ရပါမယ်။ လွဲလို့မရပါဘူး။ ပုံတွေ ထပ်တိုးချင်တယ်ဆိုရင်တော့ ဒီ slideshow div ထဲမှာ ကြိုက်သလောက် ထပ်ထည့်လို့ရပါတယ်။ ပြီးရင် index.html ကို double click နှိပ်ပြီးတော့ ဖွင့်ကြည့်ပါ။ ပုံတွေ ပေါ်နေပါမယ်။ ပြီးရင် အဲဒီ index ဖိုင်ထဲမှာပဲ အဖွင့်နဲ့ အပိတ်ကြားမှာ CSS code တွေ ထည့်ပါမယ်။

#slideshow {
position:relative;
height:350px;
}

#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow img.active {
z-index:10;
opacity:1.0;
}

#slideshow img.last-active {
z-index:9;
}

ဒါကတော့ css code ပါ။ CSS ဆိုတာကတော့ programming မဟုတ်သေးပါဘူး။ အခုန ထည့်ထားတဲ့ ပုံတွေကို style ပေးတာပါ။ ဒါပေမယ့် အခု slideshow ရေးတဲ့အပိုင်းမှာကျတော့ style ပေးရုံထက် jQuery နဲ့ အပြန်အလှန် အချိတ်အဆက်လုပ်တယ်ဆိုရင်လည်း မမှားပါဘူး။ CSS လွဲနေရင်လည်း slider က အလုပ်မှန်မှန် မလုပ်တာမျိုး ဖြစ်နိုင်ပါတယ်။

နောက်ဆုံး ကျန်တဲ့အပိုင်းကတော့ jQuery file ကို link ချိတ်ဖို့ရယ်။ jQuery ရေးဖို့ရယ် ကျန်ပါတယ်။ link ချိတ်တာကို အရင်က download လုပ်နည်းသင်ပေးပြီး ချိတ်ခိုင်းပေမယ့် တစ်ချို့ download လုပ်ရတာ အဆင်မပြေလို့ online link နဲ့ သင်ပေးလိုက်ပါတယ်။ offline လုပ်ကြည့်ချင်တဲ့ သူတွေကလည်း What is jQuery မှာ download လုပ်နည်းကို ရှင်းပြထားပါတယ်။ ဒါဆို ကျွန်တော်တို့ jQuery စရေးပါတော့မယ်။ အဖွင့်နဲ့ အပိတ်ကြားမှာ ရေးထည့်ရမှာဖြစ်ပါတယ်။ စာလုံးပေါင်းတွေ space ခြားတာတွေ သေချာ ဂရုစိုက်ပါ။ နောက်ဆုံး ဘယ်လိုမှမရဘူးဆိုရင်တော့ ကူးထည့်လိုက်ပါ။ ကူးထည့်ပြီးမှ ဟိုနည်းနည်းဖျက်လိုက် browser မှာ refresh လုပ်လိုက် လုပ်ကြည့်ပါ။ လိုက်စမ်းကြည့်ပေါ့။

function slideSwitch() {
var $active = $(‘#slideshow img.active’);

if ( $active.length == 0 ) $active = $(‘#slideshow img:last’);

// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $(‘#slideshow img:first’);

// uncomment the 3 lines below to pull the images in random order

// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );

$active.addClass(‘last-active’);

$next.css({opacity: 0.0})
.addClass(‘active’)
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass(‘active last-active’);
});
}

$(function() {
setInterval( “slideSwitch()”, 5000 );
});

jQuery script ထည့်ပြီးပြီဆိုရင်တော့ browser မှာ refresh လုပ်ပြီးတော့ စမ်းကြည့်ပါတော့။ တစ်ပုံပြီး တစ်ပုံ မှိန်မှိန်ပြီး ပျောက်သွားတဲ့ slideshow လှလှလေးတစ်ခုကို ရမှာဖြစ်ပါတယ်။ အခက်အခဲနဲ့ အဆင်မပြေတာ နားမလည်တာရှိရင် comment ချန်ထားခဲ့နိုင်ပါတယ်။ နောက်ဆုံး code ကတော့ အောက်ပါအတိုင်း ရှိနေပါမယ်။

function slideSwitch() {
var $active = $(‘#slideshow img.active’);

if ( $active.length == 0 ) $active = $(‘#slideshow img:last’);

// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $(‘#slideshow img:first’);

// uncomment the 3 lines below to pull the images in random order

// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );

$active.addClass(‘last-active’);

$next.css({opacity: 0.0})
.addClass(‘active’)
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass(‘active last-active’);
});
}

$(function() {
setInterval( “slideSwitch()”, 5000 );
});

/*** set the width and height to match your images **/

#slideshow {
position:relative;
height:350px;
}

#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow img.active {
z-index:10;
opacity:1.0;
}

#slideshow img.last-active {
z-index:9;
}

This is customized and localized tutorials. The original is at How to make a simple jquery slideshow