Cara Pasang Plugin jQuery Cycle di Blog

Pada kesempatan malam ini saya ingin berbagi sebuah plugin untuk keperluan dalam pembuatan Slideshow pada Blog dengan beberapa effect cantik sesuai dengan yang sobat inginkan. berbeda dengan Plugin Simple Slideshow dengan Javascript yang pernah saya posting .

Dari pada penasaran! mending lihat langsung demo nya di bawah ini :

shuffle

$('#slideshow').cycle({
    fx:     'shuffle',
    easing: 'easeOutBack',
    delay:  -4000
});

zoom

$('#slideshow').cycle({
    fx:    'zoom',
 sync:  false,
    delay: -2000
});

fade

$('#slideshow').cycle();

turnDown

$('#slideshow').cycle({
    fx:      'turnDown',
    delay:   -4000
});

curtainX

$('#slideshow').cycle({
    fx:    'curtainX',
    sync:  false,
    delay: -2000
 });

toss

 $('#slideshow').cycle({ 
    fx:      'toss',
    delay: -500
});

Masih kurang Effectnya? baiklah untuk melihat effect kumplit-nya bisa lihat langsung

Kelebihan Plugin jQuery Cycle :

Cara Pemasangan pada Blog/Website yang sangat mudah.
Effect Slideshow bisa di sesuaikan.
Support di Semua Browser.

Ada yang kurang? yah mungkin terlalu sedikit jika hanya 3 Kelebihan yang saya sebutkan, karena untuk selebihnya bisa sobat buktikan sendiri. :)

Cara Pemasangan :

Langkah #1 : Pastikan sobat sebelumnya sudah menyimpan 1 jQuery Library, jika belum silahkan simpan kode jQuery libray di bawah ini sebelum kode </head> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi jQuery library, maka efek-efek tidak akan berjalan.

Langkah #2 : Jika langkah pertama sudah di lakukan , selanjutnya simpan kode plugin di bawah ini tepat di atas kode </head> :

<!-- jQuery Cycle Plugin -->
<script src='https://googledrive.com/host/0B7H_GQEvKCj1bjRueExyQ2ZTZXM/jquery-cycle.js' type='text/javascript'></script>

Langkah #3 : Memanggil jQuery Cycle Plugin yang sudah sobat pasang di langkah ke-2 , dengan cara menambahkan kode CSS & JavaScript dibawah ini tepat di atas kode </head> :

<style type='text/css'>
#slideshow { 
    position:relative;
top:0px;left:0px;
    width:100%;
    max-width:300px; /* Atur Lebar Gambar ! */
    height:auto;
}
#slideshow img {
    width:100%;
    height:auto;
position:absolute;
    top:0px;
    left:0px;
    background:#fff url(http://www.ajaxload.info/cache/FF/FF/FF/33/33/33/6-0.gif) no-repeat center;
}
</style>

<script type='text/javascript'>
$('#slideshow').cycle({ 
    fx:      'fadeZoom', // « ganti effect sesuai dengan effect yang di inginkan!
    next:   '#before', 
    prev:   '#after',
    delay: -3000
});
</script>

Langkah Terakhir : Berikut Cara Pemasangan pada Kode HTML nya :

<div id="slideshow">
<img alt='' src='http://i.imgur.com/1nNsHmi.jpg'/>
<img alt='' src='http://i.imgur.com/8HC129z.jpg'/>
<img alt='' src='http://i.imgur.com/KiUftfk.jpg'/>
</div>