jQuery Cycle Plugin . Nice !!

Hai hai... hai bro sist.. hwkwkwkwkwk posting lagi nih . masih bergulir di dunia image . Seperti kata pepatah banyak jalan menuju roma, ribuan cara pula menampilkan image galery kamu . hwehe..

jQuery Cycle Plugin . Inti plugin ini sebenarnya adalah slidshow, tapi kalau dilihat mungkin berbeda jauh dari slideshow .

Untuk Demonya Lihat Disini

Demo

List demo Cycle Plugin

1. Image Shuffle
2. Image Bounce
3. Image Bounce 2
4. Image Custom

Cukup bagus dan lebih menarik untuk menampilkan galery gambar .

Langsung ajah caranya sob...

1. Pertama masukan script jquery ini..

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Nb: Kalo udah ada lewat ajah, biar ga doble .

2. Tyus masukan juga kedua script dibawh ini tepat dibawah script di atas,

<script src='http://granoblog.googlecode.com/files/jquery.cycle.js' type='text/javascript'></script>

<script src='http://granoblog.googlecode.com/files/jquery.easing.js' type='text/javascript'></script>

Nb: Hostingin sendiri scriptnya yah sob ??

3. ini sedikit cssnya

.pics { height: 232px; width: 232px; padding:0; margin:0; overflow: hidden }
.pics img { height: 200px; width: 200px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
-moz-border-radius: 10px; -webkit-border-radius: 10px;
}

4. javscriptnya bro..

Shuffle.

<script type='text/javascript'> 
  $('#shuffle').cycle({ 
    fx:    'shuffle', 
    delay: -4000 
});
 
</script> 

Shuffle2.

<script type='text/javascript'> 
$('#shuffle2').cycle({ 
    fx:   'shuffle', 
    shuffle: { 
        top:  -230, 
        left:  230 
    }, 
    easing: 'backinout', 
    delay: -2000 
});</script> 

Bounce in.

<script type='text/javascript'> 
$('#bouncein').cycle({ 
    fx:     'zoom', 
    easing: 'bouncein', 
    delay:  -4000 
});</script> 

Bounceout.

<script type='text/javascript'> 
$('#bounceout').cycle({ 
    fx:     'scrollDown', 
    easing: 'bounceout', 
    delay:  -2000 
});</script> 
<script type='text/javascript'> 
 

Bouncein2.

$('#bouncein2').cycle({ 
    fx:      'zoom', 
    speedIn:  2500, 
    speedOut: 500, 
    easeIn:  'bouncein', 
    easeOut: 'easeout', 
    sync:     0, 
    delay:   -4000 
});</script> 
<script type='text/javascript'> 
 

Bounceout2.

$('#bounceout2').cycle({ 
    fx:      'scrollDown', 
    speedIn:  2000, 
    speedOut: 500, 
    easeIn:  'bounceout', 
    easeOut: 'backin', 
    delay:   -2000 
});</script> 
<script type='text/javascript'> 
 

Custom

$('#custom').cycle({ 
    fx:      'custom', 
    cssBefore:{  
        left: 232,   
        top: -232,  
        display: 'block' 
    }, 
    animIn: {  
        left: 0, 
        top: 0  
    }, 
    animOut: {  
        left: 232,   
        top: 232 
    }, 
    delay: -3000 
});</script> 
 

Custom2.

<script type='text/javascript'> 
$('custom2').cycle({ 
    fx:      'custom', 
    sync: 0, 
    cssBefore: {  
        top:  0, 
        left: 232, 
        display: 'block' 
    }, 
    animIn:  { 
        left: 0 
    }, 
    animOut: {  
        top: 232 
    }, 
    delay: -1000 
});
});</script>  
 

Nb: Masukan salah satu sesuai selere kamu sob...

5 HTMLnya bro atau pemakaianya..

 <div id="custom" class="pics"> 
            <img width="200" src="img1.jpg" height="200"/> 
            <img width="200" src="img2.jpg" height="200"/> 
            <img width="200" src="img3.jpg" height="200"/> 
        </div> 
 

atau

 <div id="shuffle" class="pics"> 
            <img width="200" src="img1.jpg" height="200"/> 
            <img width="200" src="img2.jpg" height="200"/> 
            <img width="200" src="img3.jpg" height="200"/> 
        </div> 
 

Nb: untuk div id= ini sesuaikan dengan kebutuhan atau effect pada javascriptanya . Misal kalo butuh effect bouncein2 tulis ajah div id='bouncein2' .

Gimana ??? gampang kan?? bagus lagi . yah mudah2an bermanfaat bagi sobat sobat semua...