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

Wednesday, October 1, 2014

A Very Easy Staps for awsome Javascript Image Slider..

By DJ Niraj  |  9:43 PM No comments

ජාවා ස්ක්‍රිප්ට් සමග ලේසියෙන් පහසුවෙන් Image Slider එකක් ඔබේ වෙබ් අඩවියටත්.... - A very easy staps for awsome Javascript Image Slider





ඔන්න යාලුවනේ මම අදත් අලුත්ම දෙයක් අරගෙන ඔයාලව බලන්න ආවා. ගොඩක් දවසකට පස්සේ මම හිතුවා Web Designing පාඩමක් අරගෙන එන්න. තව දේවල් ටිකක් කියන්නත් තියනවා. එකක් තමයි අතරමග නවත්තල තිබුන Joomla! පාඩම අයෙත් අරගෙන එන්නත් මම හිතාගෙන ඉන්නවා. තව Visual Basic Programing ගැන පාඩමකුත් පටන් ගන්න හිතාගෙන ඉන්නවා. තව දේවල් කරන්නත් හිතාගෙන ඉන්නවා. මම ඒවා ගැන පස්සේ කියන්නම්කො. 



මම අද ඔයාලට අරගෙන එන්න හිතුවේ ලස්සන සහ පහසුවෙන් ඔබගේ වෙබ් අඩවියට එකතු කරන්න පුළුවන් Image Slider එකක් හදන හැටි ගැනයි. මම කලිනුත් මේ වගේ දෙයක් කියලා දුන්නා මතක ඇති, මතක නැති අය පල්ලෙහා ලින්ක් එකෙන් ගිහින් බලන්නකෝ. මොකද එක බලන එක අපේ මේ පාඩමටත් ගොඩාක් වැදගත් වෙනවා.



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


එහෙනම් අපි වැඩේ පටන් ගනිමු. ඉස්සෙල්ලාම ඔයාලගේ Image Slider එකට අවශ්‍ය පින්තුර ටික මොකක් හරි Image Hosting සේවාවකට Upload කරගන්න. අපි කලින් පොස්ටුවේ යොදාගත්ත Tinypic.com සේවාව තමයි මම නිර්දේශ කරන්නේ.

ඒ ඔක්කොම පින්තුර එකමප්‍රමාණයෙන් තියෙන්නත් ඕනි. Photoshop වගේ මෘදුකාංගයකින් එකේ ප්‍රමාණයන් වල පික්සල් අගයන් බලාගන්න, එක අපිට වැදගත් වෙනවා.

දැන් ඔබගේ බ්ලොග් එකේ Layout>> Add a Gadget>> HTML/Javascript විජේට්ටුවක් එකතු කරගන්න. දැන් එකේ HTML box එකට මේ පල්ලෙහා තියන Code එක කොපි කරලා පෙස්ට් කරන්න. 

<style type="text/css">
/* http://dimpost.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
       
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="Link 1"><img src="Image URL 1" alt="Text" /></a>
<a href="Link 2"><img src="Image URL 2" alt="Text" /></a>
<a href="Link 3"><img src="Image URL 3" alt="Text" /></a>
<a href="Link 4"><img src="Image URL 4" alt="Text" /></a>
<a href="Link 5"><img src="Image URL 5" alt="Text"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://freewarehut.blogspot.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>

දැන් මේ Code එකේ කොළ පාටින් තියන තැන් වලට ඔයාලගේ පින්තුරේ දිග අතට පික්සල් අගය ලබාදෙන්න. ඊටපස්සේ රෝස පාටින් තියන තැනට උස අතට පික්සල් අගය ලබාදෙන්න.

දැන් රතු පාටින් තියන තැන් වලට එම පින්තුරයට අදාලව ලින්ක් එකක් තියනවා නම් එක ලබාදෙන්න. ඊටපස්සේ නිල පාටින් තියන තැනට ඒ පින්තුරේ Image URL එක ලබාදෙන්න. දැන් දම් පාටින් තියන තැනට ඒ පින්තුරෙත් එක්ක පෙන්නන්න Text එකක් ල්කබාදෙන්න. මොකුත් Text එකක් අවශ්‍ය නැත්නම් එතන හිස්ව තියන්න.

ඔයාට මීට අමතරව තව පින්තුරයක් එකතු කරන්න ඕනිනම් </div> code එකට කලින් මේ පල්ලෙහා තියන Code කොටස එකතු කරලා කලින් වගේම වෙනස් කරගන්න. 


<a href="Link 3"><img src="Image URL 3" alt="Text" /></a>
දැන් ඒ ගැජට්ටුව Save කරන්න. ඊටපස්සේ Preview එක බැලුවම එක වැඩ කරන හැටි ඔයාලට බලාගන්න පුළුවන්.

එහෙනම් මම දැන් යන්නයි හදන්නේ. වැඩේ කොහොමද කියලා මට Comment එකක් දාලා කියන්නකෝ. මොකක් හරි අවුලක් තියනවා නම් එකත් අනිවා කියන්න.

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