MENAMPILKAN KOLEKSI FOTO PRIBADI PADA WEBSITE DENGAN JAVASCRIPT IMAGE SLIDESHOW
Terus terang ini adalah bagian yang paling saya suka ketika mendesain sebuah website, yaitu menampilkan foto-foto koleksi pribadi saya (tentu bukan seperti foto-foto Dewi Persik yang membuat banyak kaum pria jadi melek loh… 🙂 ) tetapi lebih pada kegiatan-kegiatan yang saya lakukan setiap harinya, seperti mengajar/workshop ataupun pas lagi iseng-iseng kumpul dengan teman-teman se profesi.
Sebenarnya banyak cara untuk menampilkan foto-foto ini, misalnya dengan menjadikan foto-foto/gambar tersebut menjadi sebuah file swf melalui program Macromedia Flash atau SwishMax. Akan tetapi terus terang (lagi2..) saya lebih suka menggunakan bahasa permrograman, disamping kapasitas filenya yang relatif kecil sehingga untuk me-load-nya tidak terlalu berat, tetapi juga yang paling penting adalah kepuasan batin sesudahnya..(lebay..he..he 😛 )
Baik, sebelum kita membuatnya, ada baiknya Anda lihat dulu DEMO nya. Oke, tanpa banyak prolog lagi kita mulai cara membuatnya.
1. Seperti biasa, siapkan document Notepad baru dan sisipkan script berikut pada bagian <HEAD> pada script HTML Anda.
<html>
<head>
<title>Image Slideshow</title>
<SCRIPT LANGUAGE=”JavaScript”>
var Onerotate_delay = 2000; // delay in milliseconds (5000 = 5 secs)
Onecurrent = 0;
var OneLinks = new Array(3);
OneLinks[0] = “http://www.freewarejava.com”; // Link yang akan dituju ketika gambar diklik
OneLinks[1] = “http://www.javascriptkit.com”;
OneLinks[2] = “http://www.dynamicdrive.com”;
function Onenext() {
if (document.Oneslideform.Oneslide[Onecurrent+1]) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent+1].value;
document.Oneslideform.Oneslide.selectedIndex = ++Onecurrent;
}
else Onefirst();
}
function Oneprevious() {
if (Onecurrent-1 >= 0) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent-1].value;
document.Oneslideform.Oneslide.selectedIndex = –Onecurrent;
}
else Onelast();
}
function Onefirst() {
Onecurrent = 0;
document.images.Oneshow.src = document.Oneslideform.Oneslide[0].value;
document.Oneslideform.Oneslide.selectedIndex = 0;
}
function Onelast() {
Onecurrent = document.Oneslideform.Oneslide.length-1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
}
function Oneap(text) {
document.Oneslideform.Oneslidebutton.value = (text == “Stop”) ? “Start” : “Stop”;
Onerotate();
}
function Onechange() {
Onecurrent = document.Oneslideform.Oneslide.selectedIndex;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
}
function Onerotate() {
if (document.Oneslideform.Oneslidebutton.value == “Stop”) {
Onecurrent = (Onecurrent == document.Oneslideform.Oneslide.length-1) ? 0 : Onecurrent+1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
window.setTimeout(“Onerotate()”, Onerotate_delay);
}
}
function Onetransport(){
window.location=OneLinks[Onecurrent]
}
// End –>
</SCRIPT>
</head>
2. Sisipkan script berikut pada bagian <BODY> pada script HTML Anda.
<TABLE border=”1″ cellspacing=”0″ cellpadding=”0″ bordercolor=”gray”>
<TR>
<TD>
<form name=”Oneslideform” >
<DIV align=”center”>
<TABLE width=”150″ border=”0″ cellspacing=”0″ cellpadding=”4″ bordercolor=gray>
<TR>
<TD background=”h2.png”>
<DIV align=”center”><B><FONT color=”#FFFFFF”>Snapshot</FONT></B></DIV>
</TD>
</TR>
<TR>
<TD bgcolor=”gray”>
<DIV align=”center”><A href=”javascript:Onetransport()”>
<IMG src=”mero.jpg” width=”140″ height=”110″ name=”Oneshow” border=”0″></A></DIV>
</TD>
</TR>
<TR>
<TD background=h2.png>
<DIV align=”center”>
<SELECT name=”Oneslide” onChange=”Onechange();”>
<OPTION value=”gambar1.jpg” selected>Foto</OPTION>
<OPTION value=”gambar2.jpg”>Foto</OPTION>
<OPTION value=”gambar3.jpg”>Narsis</OPTION>
<OPTION value=”gambar4.jpg”>Workshop</OPTION>
</SELECT>
</DIV>
</TD>
</TR>
<TR>
<TD background=h2.png>
<DIV align=”center”>
<INPUT type=button onClick=”Oneprevious();” value=”<<” title=”Previous”>
<INPUT type=button name=”Oneslidebutton” onClick=”Oneap(this.value);” value=”Mulai” title=”AutoPlay”>
<INPUT type=button onClick=”Onenext();” value=”>>” title=”Next”>
</DIV>
</TD>
</TR>
</TABLE>
</DIV>
</form>
</TD>
</TR>
</TABLE>
</body>
Untuk customisasi, ubahlah gambar1.jpg dan seterusnya dengan nama file gambar yang Anda miliki. Jangan lupa untuk menempatkan gambar2 tersebut pada direktory yang sama dengan file HTML ini berada. Atau Anda bisa menuliskan path filenya, apabila gambar tersebut berada pada directory tertentu, misalnya directory images, maka Anda harus menuliskan “images/gambar1.jpg” dan seterusnya.
3. Script di atas akan akan menampilkan gambar secara otomatis bergantian ketika Anda menekan tombol MULAI. Atau Anda juga bisa memilih menampilkan gambar tertentu dengan cara memilih tombol drop down di bawah
Mudah ‘kan?? Selamat berkreasi… 😉
