බ්ලොගයට Upload කරන Image වලට දෙමු නියම ගේමක් 5

කොහොමද කට්ටියට...:D මෙන්න අද මම ඔයාලට තවත් පට්ට වැඩ කැල්ලක් ගෙනාවා..මේකෙන් වෙන්නේ අපි බ්ලොගයට Upload  Image කිහිපයක් link කරලා..එකට මවුසය ගෙනියනකොට ලස්සන Zoom Effect එකක් දෙන්න පුලුවන්.ඉතින් ඔයාලත් මේක ඔයලගේ බ්ලොග්යට දා ගන්න කැමති නම් මම එකට උදව් කරන්නම්...ඔයාලා පහල තියෙන විදියට වැඩ ටික කරන්න..

මුලින්ම මෙතනින් Demo එක බලා ගන්න

පියවර 1. Dashboard >> Desing >> Edit HTML යන්න..මතක ඇතුව Expand Widget Templates තැනට හරියක්
දෙන්න..දැන් මම පහල දිලා තියෙන කොඩ් එක හොයා ගන්න.

]]></b:skin>

ඉට පස්සේ ]]></b:skin> කොඩ් එකට උඩින් මම පහල දිලා තියෙන කොඩ් එක Copy, Past කරන්න.

/* Blogger Zoom Gallery By saamgeadaviya.blogspot.com
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZnQZgy-vAHwUlLaptwV_pYre9OeBT7yzaMTnI0V16_Vt8LMUyUDgr7a99on4J54UBQshmqKwqbjxzUydd5WTNj0cOCfVTSBuyRUiBqX81elyOCo7PDlHNgrKoeUjtgHMYZHqGy-WSE7tI/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

ඉට පස්සේ මේ කොඩ් එක හොයගන්න </head>

දැන් </head> එකට පහලින් මම පහල දිලා තියෙන කොඩ් එක Copy, Past කරන්න.

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
</script>

දැන් Template එක Save කරන්න.... Save Template


දැන් ඔයලා Layout >> Page Element >> Add a gadget >> "html/java script" එකක් ගන්න..එකට මම පහල දිලා තියෙන කොඩ් එක copy කරගෙන ඔයාලා "html/java script" එකට past කරන්න

<ul class="thumb">
<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="URL 2 #"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="URL 3 #"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="URL 4 #"><img src="picture 4 Link" alt="" /></a></li>
</ul>

ඊට පස්සේ "html/java script" එක Save කරන්න..

වැදගත්
ඔයලා මේ සදහා යොදා ගන්න කැමති Image එකක Url  එක නිවැරදිව දෙන්න.
Image එක Click කර විට ඔබට අවශය මෙනුව සදහා යාමට නිවැරදිව Link කරන්න..


කොහොමද වැඩේ

මතක ඇතුව ඔයාලගේ ප්‍රතිචාරයක් මේ ලිපියට දෙන්න...ඔබට ජය..