Blog မွာ Image Zoom Effect ထည့္နည္း

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

login blogger ၀င္ပါ။
Edit template ကိုသြားပါ ။ Expand widget ကို အမွန္ျခစ္ပါ.

Ctrl + F အကူအညီနဲ ့ေအာက္ကကုဒ္ကိုရွာပါ

]]></b:skin> 

.ေတြ ့ျပီဆိုရင္ သူ ့အေပၚမွာေအာက္ကကုဒ္ကိုထည့္လိုက္ပါ။

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

မျပီးေသးပါဘူး ေအာက္ကကုဒ္ကိုထပ္ရွာပါ.

</head>

.ေတြ ့ျပီဆိုရင္သူ ့အေပၚမွာ ေအာက္ကကုဒ္ကိုထည့္လိုက္ပါ။

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$(&#39;a.zoom&#39;).each(function(i) {
$(this).easyZoom();
});
});
</script>

ပီးရင္ေတာ့ Save Template လုပ္လိုက္ပါ.

အထက္ပါအတိုင္းျပဳလုပ္ျပီးရင္ posting မွ newpost မွာဓါတ္ပံုတင္ၾကမယ္.ဒီေနရာမွာအဓိကပါ.Edit HTML မွတင္ရင္ပိုျမန္ပါတယ္.ဘာလုပ္ရမလဲဆိုေတာ့ေအာက္မွာၾကည့္ပါ.မိမိတို ့ upload တင္လိုက္တဲ့ပံုရဲ ့ HTML CODE ထဲမွာ class="zoom" ဆိုတဲ့စာေလးေရးထည့္ရပါမယ္.

 

အဆင္ေျပၾကပါေစ။။