Our Blog! Top News! Be a Web Designer with Joomla! Be a Good Blogger with Blogger Lessons Download Operating Systems FREE!
Topics :

Sunday, December 1, 2013

Add a Awsome Image Slider to your Website.. - Blogger Lesson 10

By DJ Niraj  |  11:16 AM No comments

ඔන්න ඉතින් ටික දවසක නිවාඩුවකින් එහෙම පස්සේ මම අද ආවා ඔයාලට අලුත්ම දෙයක් අරගෙන. අපේ බ්ලොග් සිතියම සින්ඩියට දැන් දැන් ගොඩක් බ්ලොග් එකතු වෙනවා. ඔයත් ඔයාගේ බ්ලොග් එක තවම බ්ලොග් සිතියමට දැම්මේ නැත්නම් දැන්මම එක කරන්න. 



ඒ වගේම තමයි අපේ Forum එකට ඔයාලගෙන් ලැබෙන දායකත්වයනම් ඉතාම අඩුයි. ඔයාල දන්නා දේවල් ඔයාලට අහන්න තියන ප්‍රශ්න ඉදිරිපත් කරන්න තමයි ඒ Forum එක දීල තියෙන්නේ. ඉතින් ඒ හින්දා එක ඔයාලගේ දෙයක්. ඔයාලට කැමති දෙයක් අහන්න. Registar වෙන්න ඕනිම නැ. එත් ඉතින් Registar උනානම් තවත් හොදයි. කැමති අය මෙතනින් ගිහින් බලන්නකෝ. 





හරි අපි දැන් අද ආපු වැඩේට බහිමුකො. මම අද Blogger පාඩමෙන් කියල දෙන්න හදන්නේ Image Slider එකක් ඔයාලගේ බ්ලොග් එකට එකතු කරන්නේ කොහොමද කියලා. Image Slider එකක් කොහොමද කියලා මෙන්න මෙතනින් ගිහින් බලාගන්නකෝ. ඒ වගේ එකක් තමයි අපි අපේ බ්ලොග් එකටත් එකතු කරන්න හදන්නේ. මේ Image Slider එකට Play/Pause, Prev, Next ලෙස Button 3ක්ද ඇතුලත්වෙනවා. හරි එහෙනම් අපි එක කරන්නේ කොහොමද බලමුකෝ.


ඉස්සෙල්ලාම අපි දාන්න හිතාගෙන ඉන්න පින්තුර ටික මොකක් හරි Image Host කරන Web Server එකකට ඇතුලත් කරගන්නඕනි. ඒ පින්තුර ඔක්කොම එකම ප්‍රමාණයේ ඒවා වීමත් අනිවාර්යයි. අපිට Image Host Server විධියට Flickr, Picasa, Facebook වගේ ඕනිම සේවාවක් යොදාගන්න පුළුවන්. එත් මම තෝරාගන්නේ Tiny Pic කියන සේවය. මේක පාවිච්චි කරන්නත් ගොඩක් පහසුයි. අපි ඉස්සෙල්ලාම Tinypic වෙබ් අඩවියට ගිහින්  ගිණුමක් හදාගන්න ඕනි. මම ඒක විස්තර කරන්න ඕනි නැනේ. දැන් ඉස්සෙල්ලම www.tinypic.com වෙබ් ලිපිනය හරහා ගියාම මේ පල්ලෙහා වගේ පිටුවක් හැමබවෙනවා. 


මේකේ Join Now කියන තැන click කරලා ගිහින් අලුත් ගිණුමක් ආරම්භ කරගන්න පුළුවන්. ඊටපස්සේ ලැබෙන පිටුව හරහා අපිට අපේ Photos ටික Upload කරන්න පුළුවන්. 


මේ උඩ තියන පින්තුරයේ වගේ Upload Form එකක් එනවා එකේ File කියන තැනින් අපේ Photo එක තෝරලා දීලා Upload Now කියන Button එක Click කෙරුවාම Photo එක Upload කරගන්න පුළුවන්. මේ විදියට ඔයාගේ Photos ඔක්කොම ටික Upload කරගන්න ඕනි. දැන් ඔයා Upload කරගත්ත Photos වල Image URLs ලබාගන්න ඕනි. ඒකට ඒ එක Image එකක් උඩ Click කරන්න. එතකොට පල්ලෙහා වගේ පින්තුරයක් තියන පිටුවක් ලැබේවි.


ඒ පිටුවේ ඔය නිල් පාටින් පෙන්නන තැන තමයි ඒ පින්තුරයට අදාළ Image URL එක තියෙන්නේ. ඒ Image URLs ටික කොහෙටහරි Copy කරලා තියාගන්න අපේ වැඩේට ඒ ටික ඕනිවෙනවා. 

දැන් ඔයාලගේ බ්ලොග් එකේ කැමති තැනකින් HTML/Javascript ගැජට්ටුවක් ලබාදෙන්න. ඒ ගැජෙට්ටුව තුලට පල්ලෙහා තියන Codes ටික නිවැරදිව Copy කරන්න. 


<center><script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="https://trickstoo-video-slider.googlecode.com/svn/trickstoo-slider" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
scroll: {
fx: 'fade'
}
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
</script>
<style type="text/css">
#wrapper {
border: 1px solid #ccc;
background-color: #000000;
width: 600px;
height: 400px;
padding: 20px;
margin: 0px 0 0 0px;
position: center;
left: 50%;
top: 50%;
box-shadow: 0 5px 10px #ccc;
}
#inner {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
#carousel img {
display: block;
float: left;
}
#navi {
background-color: #333;
background-color: rgba(30, 30, 30, 0.8);
border-top: 1px solid #000;
width: 600px;
height: 70px;
position: absolute;
bottom: -60px;
left: 0;
z-index: 10;
}
#timer {
background-color: #222;
background-color: rgba(20, 20, 20, 0.8);
width: 0;
height: 70px;
position: absolute;
z-index: 20;
top: 0;
left: 0;
}
#prev, #next, #play {
display: block;
position: absolute;
z-index: 30;
}
#prev, #next {
width: 47px;
height: 47px;
top: 13px;
}
#play {
width: 53px;
height: 53px;
top: 10px;
background: url(http://3.bp.blogspot.com/-owTluGE3gWE/UbMLqvzWwrI/AAAAAAAAbCQ/B-1YtXKfxGA/s1600/pause.png) 0 0 no-repeat transparent;
left: 50%;
margin-left: -27px;
}
#play.paused {
background: url(http://4.bp.blogspot.com/-ua3KYxJgPbo/UbMLrGkobfI/AAAAAAAAbCY/aYk7mYc9_gU/s1600/play.png) 0 0 no-repeat transparent;
}
#prev {
background: url(http://2.bp.blogspot.com/-1zqBjDexeWM/UbMLsB10CHI/AAAAAAAAbCo/NgGBnQwiiG0/s1600/prev.png) 0 0 no-repeat transparent;
left: 220px;
}
#next {
background: url(http://1.bp.blogspot.com/-segLuy5FzSQ/UbMLr23sZiI/AAAAAAAAbCg/s_N3Z_qGn18/s1600/next.png) 0 0 no-repeat transparent;
right: 220px;
}
</style>
<div id="wrapper">
<div id="inner">
<div id="carousel">
<img src="IMAGE URL" alt="title" width="600" height="400" border="0" />

<img src="IMAGE URL" alt="title" width="600" height="400" border="0" />

<img src="IMAGE URL" alt="title" width="600" height="400" border="0" />

<img src="IMAGE URL" alt="title" width="600" height="400" border="0" />
</div>
<div id="navi">
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
</div></div></div></center> 



දැන් ඔය කොළ පාටින් තියන Image URL කියන තැන් වලට ඔයාලා Upload කරගත්ත Photos වල URL ටික දෙන්න. Title කියන තැනට මාතෘකාවක් එහෙමත් දෙන්න. දැන් මේ HTML සටහනේ රතු පාටින් දැක්වෙන තැන්වලට ඔයාලා Upload කරපු Photos වල දිගට අදාළ පික්සල් අගය ලබාදෙන්න. ඊටපස්සේ නිල් පාටින් දැක්වෙන තැන්වලට ඒ Photos වල පළලට අදාළ පික්සල් අගය ලබාදෙන්න. 


දැන් ඔයාලා මේ ගැජට්ටුව සුපුරුදු විදියටම save කරගන්න. දැන් ඔයාලා Preview එකක් බැලුවොත් මේක ඔයාලගේ බ්ලොග් එකේ පේනහැටි බලන්න පුළුවන්.



මම හදපු එකනම් පෙන්නේ මේ වගේ. ඔයාලට මේ එකට Photos 4ක් නෙමෙයි ඕනි තරමක් යොදන්න පුළුවන්. කරන්න තියෙන්නේ මේ පල්ලෙහා තියන Code කොටස අන්තිමට තියන <img src... කියන Code කොටසට යටින් Paste කරලා කලින් වගේම වෙනස් කරන එක විතරයි. 

<img src="IMAGE URL" alt="title" width="600" height="400" border="0" />

එහෙනම් මේකත් කරලා බලලාම කොහොමද කියලා කියන්නකෝ. මම එහෙනම් දැන් ගිහින් එන්නම්. 

Author: DJ Niraj

Hello My Name is Sandun Isuru Niraj, And I'm from beautifull island Sri Lanka which is called the pearl of the Indian Ocean. I Love the blogging and web designing. Not only that I love programming much.....

0 කියන කතා:

Facebook Blogger Plugin by FreewareHut.blogspot.com

ඔබගේ අදහසත් එකතු කරන්න. මට ඒක ගොඩාක් වටිනවා..


Connect with Google+

All Rights Reserved

Protected by Copyscape Web Plagiarism Software

Safety First....

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles

TOP