Trik Membuat Slider Image (Gambar) Pada Web/blog
Tentu saja web/blog lebih terlihat menarik dengan menambahkan animasi, seperti contoh yang akan dibahas di sini adalah membuat dan menambahkan slide image (gambar) pada website / blog. Seperti apa contoh slider image, langsung lihat saja contohnya pada halaman ini.
Slider Image yang akan dibuat akan mempunyai beberapa fitur antara lain:
- Slideshow dengan gambar disertai deskripsi singkatnya
- Tombol "Play, Pause, Next, dan Previous".
- Kecepatan / delay waktu slideshow yang dapat disesuaikan
- Script yang dapat disesuaikan dengan ukuran gambar yang dipakai
OK langsung saja, begini tahapan pembuatannya. Sebelumnya download dahulu bahannya di halaman ini.
Pertama buat dulu css nya seperti di bawah ini:
[css]
<style type="text/css">
#slider {
width: 300px;
height: 186px;
position: relative;
overflow: hidden;
}
#slider a:link, #slider a:active {
color: #FF0;
text-decoration: none;
}
#slider a:hover {
color: #F00;
}
#mask-gallery {
overflow: hidden;
}
#gallery {
list-style: none;
margin: 0;
padding: 0;
z-index: 0;
width: 900px;
overflow: hidden;
}
#gallery li {
float: left;
}
#mask-excerpt {
position: absolute;
top: 0;
left: 0;
z-index: 500px;
width: 100px;
overflow: hidden;
}
#excerpt {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
list-style: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
top: 0;
left: 0;
width: 100px;
background-color: #000;
overflow: hidden;
font-family: arial;
font-size: 10px;
color: #fff;
}
#excerpt li {
padding: 5px;
}
</style>
[/css]
Ganti ukuran gambar sesuai dengan gambar anda. Selanjutnya Copy dan pastekan kode script di bawah di atas atau di bawah kode css yang baru anda buat.
[jscript]
<script>
$(document).ready(function() {
var speed = 5000;
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
var run = setInterval('newsscoller(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});
$('#btn-next').click(function () {
newsscoller(0);
return false;
});
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed);
}
);
});
function newsscoller(prev) {
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
if (prev) {
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
} else {
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
$('#excerpt li, #gallery li').removeClass('selected');
next_image.addClass('selected');
next_excerpt.addClass('selected');
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800);
}
</script>
[/jscript]
Var Speed= 5000, yang berarti mengatur delay untuk setiap pergantian gambar (semakin kecil nilainya maka semakin cepat delay pergantian gambarnya). "$('#mask-gallery').scrollTo(next_image, 800)" dan "$('#mask-excerpt').scrollTo(next_excerpt, 800)", nilai 800 mengatur kecepatan perpindahan slide (semakin kecil nilainya maka akan semakin cepat).
Selanjutnya buat konten yang mana harus diisikan antara kode <body> sampai dengan </body>. Contohnya seperti di bawah:
[html]
<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><img src="images/gambar1.jpg" width="300" height="186" alt=""/></li>
<li><img src="images/gambar2.jpg" width="300" height="186" alt=""/></li>
<li><img src="images/gambar3.jpg" width="300" height="186" alt=""/></li>
</ul>
</div>
<div id="mask-excerpt">
<ul id="excerpt">
<li>Isikan diskripsi singkat untuk gambar <a href="#">slideshow yang pertama</a></li>
<li>Selanjutnya bagian ini untuk deskripsi singkat <a href="#">gambar yang kedua</a></li>
<li>Dan ini merupakan deskripsi singkat untuk <a href="#">gambar yang ketiga</a></li>
</ul>
</div>
</div>
<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-play">play</a>
<a href="#" id="btn-next">next</a>
</div>
[/html]
Nah sekarang link kan script file "jquery.scrollTo" dan "jquery-1.3.1.min" dalam folder "js" yang baru saja anda download diantara kode <head> sampai </head>. Cara link nya contohnya seperti di bawah ini:
[jscript collapse="false"]
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
[/jscript]
Untuk pengguna blogger "src=..." gantikan dengan alamat url dimana script file tersebut anda upload. Jika anda mempunyai account gmail, upload file anda di google sites. Lihat hasilnya di sini.
Untuk mengaktifkan efek rollover maka anda perlu menambahkan tag id tambahan untuk efek link gambarnya (tuliskan kode ini di bawah kode tag id paling akhir dari '#atas' dibawah kode " } " ). Gambar yang saya pakai mempunyai alamat url 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1qU-jvn13h3gqEj33r5J1RQQEk7rDGr6Nf0pcmaEIkFRUTaA_Ht89AzC7Fe_NmYhq8GxzjL3lzzxfu60rvJfTSTZEwHI12WsLJvVe6CxD7xQoALQdaG4zGrebAeqdqaKkB6L6lP64ls/s320/top.gif'. Tuliskan kode CSSnya seperti di bawah ini: