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 ကုိ ထပ္ေဆာက္လိုက္ပါ။ ေသခ်ာေအာင္ ေအာက္က ပုံကုိၾကည့္ပါ။

ၿပီးရင္ အဲဒီ SEO Service ကုိ သြားၿပီးေတာ့ သူ႔ slide show ေပၚကုိ pointer တင္၊ ၿပီးရင္ right click ႏွိပ္ၿပီးေတာ့ save image as ကုိေရြးၿပီး တစ္ပုံၿပီး တစ္ပုံ desktop ေပၚက ခုန slideshow folder ထဲက images folder ထဲကုိ ပထမ တစ္ပုံကုိ 01.jpg ၊ ေနာက္တစ္ပုံကုိ 02.jpg ဆုိၿပီး နာမည္ေပးၿပီး သိမ္းလုိက္ပါ။ ေအာက္က ပုံကုိၾကည့္ပါ။
images
ပုံႏွစ္ပုံရၿပီဆုိရင္ coding ဘက္ကုိ ဆက္သြားပါမယ္။ notepad++ ဖြင့္လိုက္ပါ။ ၿပီးရင္ new file ေခၚၿပီးေတာ့
1
2
3
4
5
<!doctype html>
<html>
<head></head>
<body></body>
</html>
လို႔ ရုိက္ထည့္ၿပီးေတာ့ ခုနက desktop ေပၚက slideshow folder ထဲမွာ index.html ဆုိတဲ့ နာမည္နဲ႔ သိမ္းလိုက္ပါ။ ၿပီးရင္ အဲဒီ index မွာပဲ အဖြင့္နဲ႔ အပိတ္ထဲမွာ code နည္းနည္း ထပ္ေရးရပါမယ္။
1
2
3
4
5
6
7
8
9
<body>
<div id="slideshow">
    <img src="images/01.jpg" alt="Slideshow Image 1" class="active" />
    <img src="images/02.jpg" alt="" />
</div>
</body>
ဒါက html တည္ေဆာက္ပုံပါ။ id ကုိေတာ့ slideshow ပဲ ျဖစ္ရပါမယ္။ လြဲလို႔မရပါဘူး။ ပုံေတြ ထပ္တုိးခ်င္တယ္ဆုိရင္ေတာ့ ဒီ slideshow div ထဲမွာ ႀကိဳက္သေလာက္ ထပ္ထည့္လို႔ရပါတယ္။ ၿပီးရင္ index.html ကုိ double click ႏွိပ္ၿပီးေတာ့ ဖြင့္ၾကည့္ပါ။ ပုံေတြ ေပၚေနပါမယ္။ ၿပီးရင္ အဲဒီ index ဖုိင္ထဲမွာပဲ အဖြင့္နဲ႔ အပိတ္ၾကားမွာ CSS code ေတြ ထည့္ပါမယ္။
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<head>
<style type="text/css">
#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;
}
</style>
</head>
ဒါကေတာ့ 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 လုပ္လိုက္ လုပ္ၾကည့္ပါ။ လိုက္စမ္းၾကည့္ေပါ့။
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
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 );
});
</script>
jQuery script ထည့္ၿပီးၿပီဆုိရင္ေတာ့ browser မွာ refresh လုပ္ၿပီးေတာ့ စမ္းၾကည့္ပါေတာ့။ တစ္ပုံၿပီး တစ္ပုံ မွိန္မွိန္ၿပီး ေပ်ာက္သြားတဲ့ slideshow လွလွေလးတစ္ခုကုိ ရမွာျဖစ္ပါတယ္။ အခက္အခဲနဲ႔ အဆင္မေျပတာ နားမလည္တာရွိရင္ comment ခ်န္ထားခဲ့ႏုိင္ပါတယ္။ ေနာက္ဆုံး code ကေတာ့ ေအာက္ပါအတုိင္း ရွိေနပါမယ္။
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Slide Show Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
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 );
});
</script>
<style type="text/css">
/*** 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;
}
</style>
</head>
<body>
<div id="slideshow">
    <img src="images/01.jpg" alt="Slideshow Image 1" class="active" />
    <img src="images/02.jpg" alt="" />
</div>
</body>
</html>
ref: IT Group