ဘေလာ့မွာ ပုံေလးေတြကို Slideshow နဲ႕လုပ္ျခင္လား

6:28:00 am  ဘေလာ့ခရီးသည္  2 comments

သည္နည္းေလးကေတာ့ မိတ္ေဆြတို႕ အေနနဲ႕ မိမိတို႕ ဘေလာ့ေလးေပၚမွာ ဆိုဒ္ဘားမွာေပါ့
ပုံေလးေတြကို စိုက္ရွိဳးေလးနဲ႕ တင္ျခင္သူမ်ားအတြက္ နည္းလမ္းေလးတစ္ခုပါ...သူက လြယ္ကူပါတယ္
ကုဒ္ေလးေတြ နဲ႕ ဖန္တီးထားတာမို႕ ထည့္လို႕ လြယ္သလို ပုံေတြကိုလည္း တပုံစီတင္မယ္ဆို ဆိုဒ္
ေနရာ ကုန္မယ္ေလ.. ခုလို တေနရာ ထဲကေန တင္ျခင္သေလာက္ ပုံေလးေတြကို slide show ပုံစံေလးနဲ႕
ဆိုေတာ့ လန္းသြားတာေပါ့ စမ္းၾကည့္လုိက္ပါေနာ္...


ထည့္နည္းကေတာ့ ေအာက္ကတိုင္းပါဘဲ.....

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<style>

#slideshow {margin:50px auto;position:relative;width:240px;height:240px;padding:10px;box-shadow: 0 0 20px rgba(0,0,0,0.4);}

#slideshow > div {position:absolute;top:5px;left:-1px;right:10px;bottom:10px;}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script>

$(function() {

$("#slideshow > div:gt(0)").hide();

setInterval(function() {

$('#slideshow > div:first')

.fadeOut(1000)

.next()

.fadeIn(1000)

.end()

.appendTo('#slideshow');

}, 3000);

});

</script>

<div id="slideshow">

<div>

<img alt="" class="icon-action" src="Image URL" /></div>

<div>

<img alt="" class="icon-action" src="Image URL" /></div>

<div>

<img alt="" class="icon-action" src="Image URL" /></div>

</div>

ကုဒ္ေတြကို ၾကည့္လုိက္ပါေနာ္...

*  Image URLေနရာမွာ မိမိတို႕ တင္လိုတဲ့ ပုံရဲ႕ လင့္ကိုထည့္ပါ
* 250x250ဆိုဒ္ေတြကို လိုသလို သုံးနိဳင္ပါတယ္.. ပုံၾကီးေနပါက ဆိုဒ္ ခ်ိန္ေပးပါ
အဆင္ေျပပါေစ...
မွတ္ခ်က္..... ပုံကို ဆိုဒ္...250 x 250 လုပ္တာ သင့္ေတာ္ဆုံးပါဘဲဗ်ာ.. ခုတင္တာက သေဘာျပထားျခင္းပါ... တင္မည္ဆိုပါက ဆိုဒ္ကို အဲတိုင္း ပုံေတြ လုပ္ေပးသင့္ပါတယ္...