Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Beberapa Contoh Modifikasi Slideshow jQuery

Beberapa Contoh Modifikasi Slideshow jQuery

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 atribut alt pada masing-masing gambar). Ke dua adalah langkah animasi. Urutannya:

  1. Sembunyikan caption
  2. Geser slider
  3. 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%;
}

Lihat Demo

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');
});

Lihat Demo

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 17 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!