Dengan jQuery Skitter kita dapat membuat slideshow dengan baik. Website skitter ada di http://thiagosf.net/projects/jquery/skitter/ .
Pada contoh kali ini kita akan membuat slideshow untuk image dengan ukuran 940px X 300px.
- Pertama-tama silahkan download filenya dan letakkan di project website anda
- Langkah kedua adalah menginclude file-file yang diperlukan seperti contoh :
<link href=”skitter/css/skitter.styles.css” type=”text/css” media=”all” rel=”stylesheet” />
<script src=”development-bundle/jquery-1.6.2.js”></script>
<script src=”skitter/js/jquery.skitter.min.js”></script>
<script src=”skitter/js/jquery.easing.1.3.js”></script>
<script src=”skitter/js/jquery.animate-colors-min.js”></script> - Membuat coding html untuk image-image yang akan dijadikan slideshow misalnya :
<div class=”box_skitter box_skitter_large”>
<ul>
<li><a href=”http://www.proweb.co.id”><img src=”e02/slide1.jpg” class=”block” /></a></li>
<li><a href=”http://www.proweb.co.id”><img src=”e02/slide2.jpg” class=”cubeShow” /></a></li>
<li><a href=”http://www.proweb.co.id”><img src=”e02/slide3.jpg” class=”downBars” /></a></li>
</ul>
</div>Perhatikan class masing-masing img merupakan style animasi yang akan ditampilkan
- Coding jQuerynya:
$(function(){
$(‘.box_skitter_large’).skitter();
}); - Atau coding lengkapnya:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<link href=”skitter/css/skitter.styles.css” type=”text/css” media=”all” rel=”stylesheet” />
<script src=”development-bundle/jquery-1.6.2.js”></script>
<script src=”skitter/js/jquery.skitter.min.js”></script>
<script src=”skitter/js/jquery.easing.1.3.js”></script>
<script src=”skitter/js/jquery.animate-colors-min.js”></script>
<script>
$(function(){
$(‘.box_skitter_large’).skitter();
});
</script>
</head>
<body>
<div class=”box_skitter box_skitter_large”>
<ul>
<li><a href=”http://www.proweb.co.id”><img src=”e02/slide1.jpg” class=”block” /></a></li>
<li><a href=”http://www.proweb.co.id”><img src=”e02/slide2.jpg” class=”cubeShow” /></a></li>
<li><a href=”http://www.proweb.co.id”><img src=”e02/slide3.jpg” class=”downBars” /></a></li>
</ul>
</div>
</body>
</html> - Edit css dari skitter.styles.css di bagian bawah sesuai dengan ukuran image kita misalnya:
.box_skitter_large {width:940px;height:300px;} - Demonya dapat dilihat di http://aris.proweb.asia/skitter_slideshow.html .
Untuk mengubah number menjadi dots : dots:true,navigation: false, misal $(‘.box_skitter_large’).skitter({numbers: false,interval:3000,dots:true,navigation: false});
Untuk menubah koordinat dots, silahkan ubah cssnya pada bottom dan padding bagian
.box_skitter .info_slide_dots
Misal
.box_skitter .info_slide_dots {position:absolute;bottom:0px;z-index:151;padding:5px 0 5px 860px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
Untuk mengubah ukuran dot perhatikan width dan height pada line berikut:
.box_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:15px;height:15px;text-indent:-9999em;overflow:hidden;}
Kunjungi www.proweb.co.id untuk menambah wawasan anda.