Efek Transisi Pada Foto Gallery
jqFancyTransitions merupakan jQuery plugin yang memungkinkan kita untuk menampilkan slideshow galeri gambar dengan efek transisi yang berbeda-beda.
D e m o :
Untuk menciptakan slideshow dengan efek transisi ini, kita hanya memerlukan jQuery seperti berikut:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="URL_jqFancyTransitions.js"></script>
Kedua file tersebut harus sudah tertanam dalam template dan biasanya ditempatkan dalam tag <head>.
kemudian untuk menampilkan slideshow dengan efek transisi kedalam halaman blog atau website, kita memerlukan kerangka HTML, syntaxnya seperti berikut ini:
<div id="
MY_GALLERY"><img src="
<img src="
<img src="
... URL_image Lainnya ...
</div>
dan dibawahnya silahkan letakan javascript fuctions seperti berikut ini untuk memanggil fungsi:
<script> $('
#MY_GALLERY').jqFancyTransitions({Contoh:
<script>$('
#MY_GALLERY').jqFancyTransitions({Jika pada halaman yang sama kita memiliki beberapa galery, masing-masing diidentifikasikan oleh ID atribut yang berbeda ( contoh: <div id="
MY_GALLERY"> ), sedangkan untuk options atau parameter lainya, semuanya dipisahkan dengan tanda koma.Berikut ini adalah beberapa contoh parameter standart yang biasa gunakan:
width dan height: untuk mengatur ukuran
effect: adalah jenis transisi, dapat menggunakan wave, zipper atau curtain dll...
position: adalah posisi di mana Anda mulai membuat transisi dan alternatif lainnya, seperti atas, bawah, atau curtain
direction: adalah arah membuat transisi dan dapat fountainAlternate, kiri, kanan, alternatif, acak atau air mancur dll..
delay: adalah waktu saat gambar ditampilkan (default adalah 5000 atau 5 detik)
strips: adalah untuk menunjukkan jumlah "potongan" (default 20)
stripDelay: adalah waktu saat gambar ditampilkan pada setiap "bagian" (default 50)
Pilihan lain memungkinkan kita mengontrol teks yang dapat ditambahkan pada setiap bagian gambar, dengan menempatkan nya kedalam alt atribut:
Contoh:
<img src="
alt="Text yang akan di tampilkan"/>Berikut ini parameter yang biasa digunakan:
titleOpacity: untuk menunjukkan opacity teks
titleSpeed: adalah waktu yang dibutuhkan untuk ditampilkan
Selain itu, slideshow dengan efek transisi ini dilengkapi dengan tombol navigasi, berupa tombol "Next - Prev" untuk menampilkan gambar sebelum dan berikutnya. Tombol-tombol angka juga akan ditampilkan dibawah galery gambar, melengkapinya untuk menavigasi gambar sesuai dengan urutannya.
Untuk menampilkan navigasi tersebut, kita hanya perlu memasukan parameternya kedalam javascript fuctions seperti berikut ini:
<script>$('
#MY_GALLERY').jqFancyTransitions({Nah, demikianlah sekilas tentang bagaimana menciptakan SlideShow dengan efek transisi. Okay! mungkin hanya itu saja yang bisa saya share untuk kali ini, jika kurang puas, anda bisa mengunjungi halaman situs pengembang disini >>
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon