membuat Slideshow dengan jQuery
Tadi siang ada permintaan untuk membuat animasi transisi gambar dengan efek fading. Tadinya, hanya client dengan penuh percaya diri meminta agar dibuatkan dengan menggunakan Flash. Memang sih, dengan menggunakan Flash, animasi low level dapat dilakukan dengan mudah serta ringan, tapi tentu saja dengan trade off tertentu.
Flash, hanya bisa dijalankan pada browser yang memiliki plugin Flash Player dari adobe, dan meskipun hampir 98% browser didunia memiliki plugin gratis tersebut, tetap saja, hal itu merupakan sebuah beban tambahan untuk browser, karena harus me-load komponen tambahan.
Selain, itu disisi usability, flash merupakan aplikasi yang dijalankan dalam bentuk binary, dan meskipun memang ada aplikasi yang dapat dibuat secara dinamis, somehow, flash bukan pilihan untuk permintaan ini.
Maka, kemudian pilihannya jatuh pada javascript, dengan handler low-level animation oleh jQuery, slideshow animasi dapat dikerjakan dengan mudah.
Idenya adalah dengan meletakkan 2 buah object Image (tag <img>) dalam satu container, yang mana kedua object ini diletakkan pada lokasi yang PERSIS sama, dengan sistem layering, sehingga object yang diatas akan menutupi object yang dibawah.
Katakanlah 2 layer, layer1 dan layer2. Layer 1 berisi gambar yang sudah (atau belum) diload oleh browser, dan layer 2 juga memuat gambar yang lain, kemudian dengan timing tertentu, layer 2 akan memudar (fading), dan setelah efek fading ini selesai, layer 2 ini segera dihapus dari DOM, dengan tujuan agar browser tidak overload. layer 1 akan pindah menjadi layer 2, dan segera menyisipkan sebuah layer menjadi layer 1 dengan diisi gambar berikutnya, dan demikian seterusnya.
demonya dapat dilihat disini .