Sebelumnya saya pernah menulis tentang membuat simple silde show pada website, dan kali tidak jauh berbeda, hanya saja ada beberapa perbedaan dari tampilan dan programnya. Slideshow yang kali ini lebih terlihat minimalis tetapi begitu menarik. karena tidak ada halaman sebagai penomoran seperti slideshow yang pertama, hanya ada tombol next dan previus saja, tetapi ketika kita diamkan, gambar akan terus berganti-ganti dengan sendirinya. dan animasinyapun berbeda dari yang slideshow pertama, animasi slideshow ini gambar akan berpindah dari arah kanan kearah kiri.
JIka anda ingin mencoba untuk membuatnya,
ikuti langkah demi langkah yang saya berikan.
seperti biasa anda harus menyiapkan beberapa gambar yang akan ditampilkan dislideshow nanti.
setelah gambar disiapkan, buka notepad++ anda.
lalu buatlah program untuk menampilkan gambar tersebut.
<html>
<head>
<title>Slideshow2-blog tutorial</title>
</head>
<body>
<div id="hadi">
<div id="buttons">
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
<div class="clear"></div>
</div>
<b><font size="5">Meyda Sefira</font></b>
<div class="clear"></div>
<div id="slides">
<ul>
<li><img src="../../gambar/319544_531128123564793_1110527766_n.jpg" width="240" height="240" alt="Slide 1"/></li>
<li><img src="../../gambar/401275_522167764460940_709106150_n.jpg" width="240" height="240" alt="Slide 2"/></li>
<li><img src="../../gambar/559932_522322174445499_377680841_n.jpg" width="240" height="240" alt="Slide 3"/></li>
<li><img src="../../gambar/meyda(4).jpg" width="240" height="240" alt="Slide 4"/></li>
</ul>
<div class="clear"></div>
</div>
</div>
<center><b>BLOG TUTORIAL: algoritma-cyber.blogspot.com
</body>
</html>
Lalu simpan program anda,
misalnya dengan nama: slideshow2.html
jika anda jalankan program tersebut akan menghasilkan output seperti gambar dibawah ini:
selanjutnya siapkan gambar untuk next dan prex, bisa anda buat diphotoshop, corel atau editor lainnya. atau anda bisa ambil gambar dibawah ini:
Untuk merapihkan tampilan slideshow2.html tersebut, tambahkan kode css pada file slideshow2.html anda tersebut.
letaakkan kode berikut tepat dibawah kode </tittle> ,
<style>
#hadi {
width:255px;
height:290px;
margin:0 auto;
overflow:hidden;
}
#slides {
overflow:hidden;
/* fix ie overflow issue */
position:relative;
width:250px;
height:250px;
border:3px solid black;
}
/* remove the list styles, width : item width * total items */
#slides ul {
position:relative;
left:0;
top:0;
list-style:none;
margin:0;
padding:0;
width:750px;
}
/* width of the item, in this case I put 250x250x gif */
#slides li {
width:250px;
height:250px;
float:left;
}
#slides li img {
padding:4px;
}
/* Styling for prev and next buttons */
#buttons {
padding:0 0 5px 0;
float:right;
}
#buttons a {
display:block;
width:31px;
height:32px;
text-indent:-999em;
float:left;
outline:0;
}
a#prev {
background:url(arrow.gif) 0 -31px no-repeat;
}
a#prev:hover {
background:url(arrow.gif) 0 0 no-repeat;
}
a#next {
background:url(arrow.gif) -32px -31px no-repeat;
}
a#next:hover {
background:url(arrow.gif) -32px 0 no-repeat;
}
.clear {clear:both}
</style>
sekarang simpan program anda, dan coba anda jalnkan lagi.
jika berhasil akan menghasilkan output seperti gambar dibawah ini:
tampilannya sekarang sudah jauh lebih rapih, hanya saja belum terlihat efek slideshownya. dan tombol previus next anda masih belum berfungsi. Untuk itu anda pertama membutuhkan satu library jquery yaitu: jquery.js , bisa anda download dilink dibawah ini:
setelah itu, masih dalam file slideshow2.html tadi, tambahkan kode berikut untuk memanggil jquery yang baru saja kta download tadi.
<script type="text/javascript" src="jquery.js"></script>
sekarang langkah terakhir, anda tinggal menambahkan javaskript untuk menjalankan slideshow tersebut.
letakan javscript berikut tepat dibawah kode jquery tadi:
<script type="text/javascript">
$(document).ready(function() {
//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);
//grab the width and calculate left value
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);
//move the last item before first item, just in case user click prev button
$('#slides li:first').before($('#slides li:last'));
//set the default item to the correct position
$('#slides ul').css({'left' : left_value});
//if user clicked on prev button
$('#prev').click(function() {
//get the right position
var left_indent = parseInt($('#slides ul').css('left')) + item_width;
//slide the item
$('#slides ul:not(:animated)').animate({'left' : left_indent}, 200,function(){
//move the last item and put it as first item
$('#slides li:first').before($('#slides li:last'));
//set the default item to correct position
$('#slides ul').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if user clicked on next button
$('#next').click(function() {
//get the right position
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
//slide the item
$('#slides ul:not(:animated)').animate({'left' : left_indent}, 200, function () {
//move the first item and put it as last item
$('#slides li:last').after($('#slides li:first'));
//set the default item to correct position
$('#slides ul').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin :)
function rotate() {
$('#next').click();
}
</script>
simpan program anda,
dan coba anda jalankan lagi.
jika berhasil, efek slideshow akan muncul dan tomblo pref next akan berfungsi.
