Ini adalah tulisan pertama saya di 80 Tasks. Yang saya tulis disini adalah sebuah snippet code slide photo menggunakan JQuery. Desain yang saya gunakan disini adalah desain yang telah dibuat oleh saudara Syarip pada snippet yang berjudul CREATE CUTE SLIDE PHOTO, hanya karena pada dasarnya saya bukan orang serakah, jadi yang saya ambil cuma photo dan gambar macbooknya saja. 
Berikut ini snippet code yang telah saya buat :
HTML
Disini saya membuat sebuah file slide.js terpisah, pada file tersebut terletak semua fungsi yang digunakan dalam photo slide.
Tag-tag utama yang saya gunakan dalam slide photo ini adalah tag – tag dengan class dan id, slide-frame, slide-container, image-container, semua tag <img> di dalam class image-container, nav, dan semua tag <a> yang ada di dalam id nav. itu semua elemen html utama yang diperlukan dalam slide photo yang saya buat ini.
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Experiment - Cute Slide Photo</title> <link rel="stylesheet" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="slide.js"></script> </head> <body> <div id="container"> <div id="slide-frame"> <div id="slide-container"> <div class="image-container"><img src="images/image1.gif" alt="image satu" /></div> <div class="image-container"><img src="images/image2.gif" alt="image dua" /></div> <div class="image-container"><img src="images/image3.gif" alt="image tiga" /></div> </div> </div> </div> <div id="nav"> <a href="" class="nav-button"></a> <a href="" class="nav-button"></a> <a href="" class="nav-button"></a> </div> </body>
CSS
Berikut ini adalah css yang terdapat di dalam file style.css yang digunakan di dalam slide photo ini.
#slide-frame
{
width:380px;
height:240px;
overflow:hidden;
}
#slide-container
{
width:10000px;
position:relative;
left:0px;
}
.image-container
{
width:380px;
height:240px;
float:left;
}
#nav
{
clear:both;
width:380px;
margin:20px auto;
padding-left:280px;
}
.nav-button
{
width:20px;
height:19px;
background:url('images/button.png') no-repeat;
display:block;
float:left;
margin-right:20px;
}
.active
{
width:20px;
height:19px;
background-image:url('images/button.png');
background-repeat:no-repeat;
background-position:0px -18px;
}
JQuery
Dan ini adalah jquery slide yang saya buat, saya buat komentar di dalamnya, mudah-mudahan cukup bisa dimengerti.
secara garis besar fungsi slideImage yang saya buat adalah memanipulasi property left yang dimiliki oleh div dengan id slider container, yang di animasikan dengan method jquery animate().
$(document).ready(function(){
/**
init
*/
var slider = $("#slide-container");//container slide item yang nantinya akan digeser/slide
var button = $('.nav-button');//tombol navigasi slider
var activeClass = 'active';//nama class pada button ketika keadaan active
var speed = 500;
/**
menambahkan class .active untuk button yang di klik dan menetukan posisi 'pos' image berdasarkan button yang diklik
*/
button.each(function(i){
$(this).click(function(e){
e.preventDefault();
$(this).addClass(activeClass);//menambahkan class 'active'
button.not(':eq('+i+')').removeClass(activeClass);//menghilangkan class 'active' dari button yg sebelumnya d klik
pos = i;//menentukan posisi image/photo/slider
})
});
/**
fungsi yang menggerakan slider
*/
function slideImage(e)
{
var lebar = slider.children().first().outerWidth();//mencari tahu lebar sebuah container image/photo termasuk padding dan bordernya
e.preventDefault();
move = (-lebar*pos)+'px';//menentukan arah dan besar(px) pergeseran dari 'slider'
slider.animate({'left': move}, speed);//menggeser slider
}
/**
eksekusi
*/
button.click(slideImage);
});
Slider photo ini telah di-test pada firefox 3.6.3, chrome 5, opera 10.53, dan IE8. seharusnya hasilnya baik – baik saja, tapi kalau ternyata ada bug, please let me know, atau silahkan dirubah, ditambahkan ataupun dibongkar lagi. semoga bermanfaat
Posted by Pratt - http://interact-id.com
kaka ko gabisa deh slide photonya….
bingung nie mau nambahin album sendiri.
coba posting demo script kamu, biar bisa kita inspect masalahnya
Kl buat header prestashop, kodenya di tambahkan di mana neh gan..