Beberapa Contoh Modifikasi Slideshow jQuery
Tabel Konten
Artikel ini merupakan kelanjutan dari artikel jQuery Slideshow Otomatis dengan Navigasi Angka
1. Slideshow dengan Caption
HTML
Untuk membuat slideshow dengan caption, kita memerlukan beberapa langkah perubahan. Pertama-tama, kita ganti elemen <div class="slide">
dengan <img>
. Kemudian sisipkan elemen <figcaption>
ke dalam #slider
. Bagian inilah yang nantinya akan diisi oleh teks dari setiap item slider:
<figure id="slider">
<div class="container">
<img src="img/slide-1.jpg" alt="Deskripsi gambar 1">
<img src="img/slide-2.jpg" alt="Deskripsi gambar 2">
<img src="img/slide-3.jpg" alt="Deskripsi gambar 3">
<img src="img/slide-4.jpg" alt="Deskripsi gambar 4">
</div><figcaption></figcaption> </figure>
<nav id="slider-nav"></nav>
Supaya lebih semantik, Saya juga telah mengganti elemen #slider
yang tadinya adalah elemen divisi menjadi elemen figur. Lihat kode di atas!
CSS
Setelah itu kita set beberapa perubahan pada kode CSS:
/* Slider */
#slider {
display:block;
position:relative;
}
/* Untuk caption */
#slider figcaption {
display:block;
background-color:black;
font:normal normal 11px/normal Arial,Sans-Serif;
color:white;
opacity:.8;
padding:10px 15px;
position:absolute;
right:0;
bottom:-100px; /* sembunyikan dengan cara ini :) */
left:0;
z-index:4;
}
#slider img {
display:block;
margin:0;
width:300px; /* dimensi lebar */
height:200px; /* dimensi tinggi */
float:left;
}
jQuery
Tangkap satu objek lagi dan simpan ke dalam variabel $caption
, yaitu elemen <figcaption>
:
$caption = $slider.find('figcaption');
Setelah itu, kita harus mengubah logika animasi slideshow, karena di sini kita baru saja menambahkan elemen caption. Langkah animasinya seperti ini:
Pertama-tama, tampilkan teks slide awal ke dalam elemen
<figcaption>
sebagai awalan (dalam kasus ini Saya mengambil teks tersebut dari atributalt
pada masing-masing gambar). Ke dua adalah langkah animasi. Urutannya:
- Sembunyikan caption
- Geser slider
- Ganti teks caption dengan deskripsi yang baru, kemudian tampilkan caption.
Semuanya akan menjadi seperti ini:
$nav.find('a').on("click", function() {
$nav.find('.active').removeClass('active');
$(this).addClass('active');
var pos = $(this).index() * $slider.width(),
text = $slide.eq($(this).index()).attr('alt'); // Mengambil teks dari atribut alt pada gambar ke-`$(this).index()`
// (1) Menyembunyikan caption...
$caption.stop().animate({bottom:'-100px'}, 400);
// (2) Menggeser slider...
$container.stop().animate({left:'-'+pos+'px'}, 600, function() {
// (3) Mengganti teks caption dengan deskripsi yang baru...
// kemudian tampilkan caption dengan efek animasi properti 'bottom'
$caption.html(text).stop().animate({bottom:'0'}, 400);
});
clearInterval(autoSlide);
autoSlide = setInterval(slideShow, 3000);
return false;
}).first().addClass('active');
// Sebagai awalan => tampilkan caption dengan deskripsi atribut alt dari slide pertama
$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, 600);
Lainnya
Slideshow berupa gambar membutuhkan waktu lebih lama untuk memuat. Dan saat proses pemuatan terjadi, biasanya kita akan melihat efek yang tidak bagus dari gambar yang terpotong-potong. Cara termudah untuk mengatasi itu adalah dengan menyembunyikan semua gambar terlebih dahulu sebelum termuat. Hingga saat gambar sudah termuat, kita bisa menampilkannya:
/**
* Tip yang baik untuk slideshow berupa gambar:
* Sembunyikan tampilan sampai semua gambar benar-benar termuat...
* ... agar saat gambar sedang dimuat, dia tidak merusak pemandangan kita :)
*/
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}
$(window).on("load", function() {
// Tampilkan '.container', 'figcaption' dan '#slide-nav' saat halaman (semua gambar) telah termuat!
$container.show();
$caption.show();
$nav.css('opacity',1);
// Kemudian jalankan interval slideshow...
autoSlide = setInterval(slideShow, 3000);
});
Sementara gambar sedang memuat, kita tampilkan efek animasi loading dengan menambahkan latar berupa loading.gif
agar slideshow menjadi lebih menarik dan komunikatif:
#slider {
background:white url('img/loading.gif') no-repeat 50% 50%;
}
2. Efek Fade
CSS
Pembuatan efek fade bisa dilakukan dengan perhitungan yang lebih sederhana:
Konsep dasar slideshow dengan efek
fade
adalah: Semua gambar bertumpuk, dan masing-masing gambar bergantian menampilkan diri dengan efek peningkatan/penurunan pemudaran.
Sehingga, kode CSS yang perlu kita ubah hanya ada pada bagian ini:
#slider img {
display:block;
margin:0;
width:300px;
height:200px;
/* Gunakan posisi absolut untuk menumpuk masing-masing slide satu sama lain */
position:absolute;
top:0;
left:0;
}
jQuery
Setelah itu, ada beberapa bagian variabel yang bisa kita buang. Kita sudah tidak perlu lagi menggunakan variabel-variabel ini, karena semua slide kini berada dalam satu tumpukan!
var $slider = $('#slider'),
$caption = $slider.find('figcaption'),
$container = $slider.find('.container'),
$nav = $('#slider-nav'),
$slide = $container.children(),
s_length = $slide.length,s_wide = $slider.width() * s_length,s_height = $slider.height(),
autoSlide = null;
Efek animasi bisa dibuat dengan jQuery .fadeIn()
dan .fadeOut()
. Seperti ini:
$nav.find('a').on("click", function() {
$nav.find('.active').removeClass('active');
$(this).addClass('active');
var pos = $(this).index() * $slider.width(),
text = $slide.eq($(this).index()).attr('alt');
$caption.stop().animate({bottom:'-100px'}, 400);
// Sembunyikan semua slide dengan efek .fadeOut() ...
// ... kemudian tampilkan slide ke-`$(this).index()` dengan efek .fadeIn()
$slide.fadeOut(600).eq($(this).index()).fadeIn(600, function() {
$caption.html(text).stop().animate({bottom:'0'}, 400);
});
clearInterval(autoSlide);
autoSlide = setInterval(slideShow, 3000);
return false;
}).first().addClass('active');
Lainnya
Jangan lupa untuk menghilangkan latar animasi loading saat semua gambar sudah termuat:
$(window).on("load", function() {
$slider.css('background-image','none');
});
17 Komentar
abang ichal
wew sy bingung ttg jquery silder iniee.
Anonim
Wah Bingung Gan,Cara Masang nya bagimana??
Taufik Nurrohman
Artikel di atas cuma digunakan sebagai bahan untuk menjelaskan cara kerja. Mengenai metode pemasangan bisa dipelajari melalui kode sumber pada halaman demo ⇒ CSS di atas
</head>
, HTML di dalam<body>
, JavaScript di bawah HTML.Andi AF Studio
semakin mahir si penulis dibidang yang dia kuasai, maka apa yang disampaikannya dalam bidang tsb melalui tulisan juga akan berpengaruh :D
reader yang mudah memahami maksud tulisannya, ya reader yang mahir juga :D
Surya Kusuma
http://jsfiddle.net/surya31/5aRvF/2/embedded/result/
IMKBC
Keren, ijin pakai :-bd
smartpulsa-88
Melihat dari pertanyaan sobat; diaryonline.web.id saya sendiri masih bingung penempatannya,maklum masih pemula Gan...
Kalo bisa sertakan cara penempatanya Gan secara komplit gitu.
Salam Sukses and Matur Thangkyu...
Taufik Nurrohman
⇒ /2012/09/simple-useful-jquery-slideshow.html?showComment=1347442153471#c8053374497862574065
Unknown
thanks kawan... :-bd
Anonim
wow mantap, thanks ilmunya
PAKAIAN.TOP
komplit sudah :D tinggal slide ini, :yaya: yaaa.. untuk pengguna setia mesin blogspot
rudi
Thank Mas...q mudeng sekaran...website q jadi jquerynya
Dwi
mantabb
Agung Susanto
(ASK) biat pas kursor di arahkan ke gambar, slider nya berhenti gimana ya?
dan bikin slider sama di kasih progress bar mirip kayak di AutoBlog.com itu gimana ya? thanks banget kalo request saya di jawab :) :)
Taufik Nurrohman
⇒ http://www.skitter-slider.net
Ahwas
sudah saya pasang diblog,tapi ko gambarnya tidak mau berganti,masalahnya dimana ya
Anonim
Kalo untuk tampilan responsivenya gmna mas.. sudah saya coba tapi susah mas.. hehe.. mohon bantuannya..