Cara Menggunakan Showcase jQuery

Kali ini kita akan membahas tentang salah satu plugin jquery, yaitu showcase.
Plugin ini merupakan salah satu plugin slideshow image yang mudah digunakan, karena plugin ini hanya memasukkan 1 file js. yaitu jquery.showcase.js. Dia tidak menggunakan file css yang harus dimasukkan pada halaman html, karena style css-nya sudah dimasukkan ke dalam jquery.showcase.js. Jadi jika ingin merubah animasi dan tata letak dari slideshow, bisa langsung diedit pada file js-nya.

Ada beberapa animasi standart yang telah disediakan oleh plugin ini, diantaranya adalah :

• Fade, Slide-Vertical, Slide-Horizontal, Swing
  untuk penggunaaan animasi ini,cukup menambahkan script berikut:
  $(“#showcase”).showcase({
              animation: { type: “fade” },
              titleBar: { autoHide: false },
              navigator: { autoHide: true }
          });

  Untuk merubah animasi dalam bentuk lain, kita hanya mengganti animation: {type :”…..”} pada script diatas.
  berikut ini contoh-contoh dari penggunaan showcase.

 

1. Animasi Fade –> Link
2. Animasi Slide Vertical –> Link
3. Animasi Slide Horizontal –> Link

 

Anda juga dapat membuat animasi baru sesuai dengan kreasi anda, caranya dengan menambahkan fungsi animasi yg baru ke dalam file jquery.showcase.js. Dan keunggulan dari plugin ini adalah :

• Mudah digunakan
• Hanya ada 1 file yang dipanggil yaitu jquery.showcase.js. sehingga memudahkan kita mengedit file js tersebut, karena plugin yang sejenis pada umumnya menggunakan file css lagi untuk mendukung animasinya berjalan.
• mudah dikembangkan.
• compatible dengan file css utama.

 

Untuk mendaparkan file showcase dapat di download secara gratis di showcase plugin

 

Kunjungi www.proweb.co.id untuk menambah wawasan anda.