Artikel ini merupakan kelanjutan dari artikel jQuery Slideshow Otomatis dengan Navigasi Angka
1. Slideshow dengan Caption
HTML
Untuk menciptakan 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="Beberapa Contoh Modifikasi Slideshow jQuery Beberapa Contoh Modifikasi Slideshow jQuery"> <img src="img/slide-2.jpg" alt="Beberapa Contoh Modifikasi Slideshow jQuery Beberapa Contoh Modifikasi Slideshow jQuery"> <img src="img/slide-3.jpg" alt="Beberapa Contoh Modifikasi Slideshow jQuery Beberapa Contoh Modifikasi Slideshow jQuery"> <img src="img/slide-4.jpg" alt="Beberapa Contoh Modifikasi Slideshow jQuery Beberapa Contoh Modifikasi Slideshow jQuery"> </div><figcaption></figcaption> </figure> <nav id="slider-nav"></nav>Supaya lebih semantik, Saya juga telah mengganti elemen #slider yang tadinya yaitu elemen divisi menjadi elemen figur. Lihat aba-aba di atas!
CSS
Setelah itu kita set beberapa perubahan pada aba-aba 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 kebijaksanaan animasi slideshow, alasannya di sini kita gres saja menambahkan elemen caption. Langkah animasinya ibarat ini:
Pertama-tama, tampilkan teks slide awal ke dalam elemen
<figcaption>sebagai awalan (dalam kasus ini Saya mengambil teks tersebut dari atributaltpada masing-masing gambar). Ke dua yaitu langkah animasi. Urutannya:
- Sembunyikan caption
- Geser slider
- Ganti teks caption dengan deskripsi yang baru, lalu tampilkan caption.
Semuanya akan menjadi ibarat 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... // lalu 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 usang untuk memuat. Dan ketika proses pemuatan terjadi, biasanya kita akan melihat efek yang tidak elok dari gambar yang terpotong-potong. Cara termudah untuk mengatasi itu yaitu dengan menyembunyikan semua gambar terlebih dahulu sebelum termuat. Hingga ketika gambar sudah termuat, kita dapat menampilkannya:
/** * Tip yang baik untuk slideshow berupa gambar: * Sembunyikan tampilan hingga semua gambar benar-benar termuat... * ... biar ketika gambar sedang dimuat, ia tidak merusak pemandangan kita :) */ #slider .container, #slider figcaption {display:none} #slider-nav {opacity:0}$(window).on("load", function() { // Tampilkan '.container', 'figcaption' dan '#slide-nav' ketika 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 biar slideshow menjadi lebih menarik dan komunikatif:
#slider { background:white url('img/loading.gif') no-repeat 50% 50%; }2. Efek Fade
CSS
Pembuatan efek fade dapat dilakukan dengan perhitungan yang lebih sederhana:
Konsep dasar slideshow dengan efek
fadeadalah: Semua gambar bertumpuk, dan masing-masing gambar bergantian menampilkan diri dengan efek peningkatan/penurunan pemudaran.
Sehingga, aba-aba CSS yang perlu kita ubah hanya ada pada bab ini:
#slider img { display:block; margin:0; width:300px; height:200px; /* Gunakan posisi adikara untuk menumpuk masing-masing slide satu sama lain */ position:absolute; top:0; left:0; }jQuery
Setelah itu, ada beberapa bab variabel yang dapat kita buang. Kita sudah tidak perlu lagi memakai variabel-variabel ini, alasannya semua slide sekarang 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 dapat dibentuk 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() ... // ... lalu 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 ketika semua gambar sudah termuat:
$(window).on("load", function() { $slider.css('background-image','none'); });