jQuery Talk: Image Slider

Kali ini saya akan membahas bagaimana caranya membuat Slide (pergantian galeri foto) pada website kita. Image Slider yang saya akan bahas menggunakan efek fadeout dan fadein yang sudah ada pada jQuery library dan juga menggunakan fungsi pemberi delay yang juga ada pada jQuery library. Untuk lebih jelasnya, mari kita bahas potongan- potongan source code body html yang diperlukan berikut ini.

<body>
<img id=”imageSlider” src=”foto/baby4.jpg” />
</body>

Untuk permulaan marilah pertama2 buat html-nya. HTML yang diperlukan hanya seperti quote yang diatas. Memang awal pembuatan Image Slider terlihat hanya seperti memberikan atau memasang foto dalam html, namun dari objek ini dapat kita mainkan dengan jQuery effects. Untuk mempercantik ukuran dan tampilan Image Slider, tambahkan css berikut.

#imageSlider {
border: solid 1px #000;
width: 655px;
height: 400px;
padding: 10px;
}

css ini hanya memberikan border dan padding serta mengatur panjang dan lebar untuk imageSlider.

Saatnya kita tambahkan jQuery code pada text html kita. Berikut ini potongan- potongan source code jQuery yang akan dibahas satu persatu.

var imgs = [
‘foto/baby1.jpeg’,
‘foto/baby2.jpg’,
‘foto/baby3.jpg’,
‘foto/baby4.jpg’];

code diatas digunakan untuk menginisialisasi array of string dengan nama imgs, string-sting tersebut merupakan alamat (src) setiap foto.

var cnt = imgs.length;

penginisialisasian variabel cnt diatas digunakan untuk mengakses setiap indeks dari variabel imgs diatas.

$(function() {
setInterval(Slider, 1500);
});

ini adalah bagian terpenting dalam pemakaian delay yang sangat dibutuhkan dalam Image Slider. Untuk memudahkan pembahasannya mari kita buat suatu variabel bantu.

setInterval(X,Y);

X adalah suatu fungsi yang akan dimainkan atau dijalankan sekali dalam Y mili detik. Untuk kasus code diatas, berarti browser akan memainkan fungsi Slider satu kali dalam 1500 mili detik. Mari kita liat apa itu fungsi Slide.

function Slider() {
$(‘#imageSlider’).fadeOut(“slow”, function() {
$(this).attr(‘src’, imgs[(imgs.length++) % cnt]).fadeIn(“slow”); return false;
});
};

Selection #imageSlider(objek image pada html) diberikan effect fadeout dengan durasi “slow” lalu atribut src imageSlider diganti dengan variabel imgs, indeks ke cnt yang akan selalu berganti dengan adanya imgs.length++, seletah itu objek ini(imageSlider) akan diberikan efek fadein dengan durasi “slow” juga. Berikut code jQuery yang lengkap.

<script type=”text/javascript”>
var imgs = [
‘foto/baby1.jpeg’,
‘foto/baby2.jpg’,
‘foto/baby3.jpg’,
‘foto/baby4.jpg’];
var cnt = imgs.length;

$(function() {
setInterval(Slider, 1500);
});

function Slider() {
$(‘#imageSlider’).fadeOut(“slow”, function() {
$(this).attr(‘src’, imgs[(imgs.length++) % cnt]).fadeIn(“slow”); return false;
});
};
</script>

Untuk lebih memudahkan pembelajaran, silahkan download contoh turorial ini disini. Atau liat contoh peggunaannya disini (Masuk ke page galery yaa).

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee

Advertisements

9 thoughts on “jQuery Talk: Image Slider

  1. Pingback: Tutorial jQuery eSDhee-Slider v1.0, plugin for image slider « eSDhee weBlog

  2. ane coba taro scripnya di web ane tapi ko gak jalan yah…????…tapi yang download dari agan sih jalan…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s