Pages

Thursday, June 7, 2012

Image Zoom Effect ထည့္နည္း

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


ကဲစလိုက္ၾကရေအာင္.
1.

2.Ctrl + F အကူအညီနဲ ့ေအာက္ကကုဒ္ကိုရွာပါ.
]]></b:skin>

3.ေတြ ့ျပီဆိုရင္ သူ ့အေပၚမွာေအာက္ကကုဒ္ကိုထည့္လိုက္ပါ။
#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;
}

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

5.ေတြ ့ျပီဆိုရင္သူ ့အေပၚမွာ ေအာက္ကကုဒ္ကိုထည့္လိုက္ပါ။
<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>

0 comments:

Post a Comment