Image Gallery Menggunakan Jquery 1.4.2

Lagi jalan-jalan ke blog sahabat, secara tidak sengaja saya menemukan trik menarik tentang macam-macam efek image gallery menggunakan Jquery 1.4.2. Trik ini sangat atraktif jika sobat sedang posting artikel tentang foto-foto sehingga tidak memakan terlalu banyak ruang, dan pengunjung juga tidak merasa bosan.

Oke lagsung saja silahkan lihat demo di bawah ini untuk macam-macam efeknya.

Only compatible with firefox

Untuk pemasangannya, sobat blogger bisa menggunakan kode di bawah ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi1.js" type="text/javascript">
</script><script src="http://belajarblogging.googlecode.com/files/animasi2.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" /></div>
<script type="text/javascript">

SILAHKAN PILIH SALAH SATU KODE JQUERY YANG SOBAT SUKA KEMUDIAN MASUKKAN KODENYA DI SINI.

</script>

Saya contohkan gambar di atas menggunakan kode seperti ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi1.js" type="text/javascript">
</script><script src="http://belajarblogging.googlecode.com/files/animasi2.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSReesaelVLQIsnURGZqjKp5g2cYbKYtqWjFKDQOu9zjJhZPraICZAK3ivS7HG8ElwV4zeezgISIxeGyVFVhUVhxlA9OQxN7_C0ZYHC1Ke5ojW3Xg5r7L2q90SijNcztZe62bPJp9Jdohf/s400/iphone-4g.jpg" width="400" />
<img height="200" src="http://peoplemeetme.com/wp-content/uploads/2010/09/iphone-4g-11.jpg" width="400" />
<img height="200" src="http://1.bp.blogspot.com/_7510iPezit8/TRbRi3jJjkI/AAAAAAAAAPY/sAn48YoV0A8/s1600/11119422-apple-iphone-4.jpg" width="400" />
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyFisvJfB6XH8RnJAmWwFob8xk1bhVdEcrcqc6AyieQWy1ZG9Jni4uB4kCGGH2r_rvgy0O6LVtx2S_0OJc92HWgXXgRxvjIZQFyjMlvUD47xFhbFhwTdhEgKFFuQ7lVyVLEVE8ZIkfOCQ/s1600/iphone4.jpeg.jpg" width="400" />
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRAObO3AED0gOoSkGrWcADWJzHLfym3-AU-8frFcbFh2vVtELmwWEUzN4ZMOVTV_3OlRN11F73-zpeKIu_FXH0-0KcuUlNsMXjdmC_qSYI9sA1JVXcITT1VmKaZHZsA_rIS6GMFPz7QusY/s1600/iphone4.gif" width="400" /></div>
<script type="text/javascript">

$('#ke2').cycle({fx:'scrollDown',speedIn: 2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});

</script>

Untuk kode-kode jquery yang lain, silahkan pilih di bawah ini.

$('#ke2').cycle({fx:'zoom',speedIn:2500,speedOut: 500,easeIn:'bouncein',easeOut: 'easeout',sync:0,delay:-4000});

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

$('#ke2').cycle({fx:'custom',sync: 0,cssBefore: {top:0,left: 360,display: 'block'},animIn:{left: 0},animOut: {top: 232},delay: -1000});

$('#ke2').cycle({fx:'custom',cssBefore: {left: 115,top: 115,width: 0,height: 0,opacity: 1,zIndex: 1},animOut: {opacity: 0},animIn: {left: 0,top: 0,width: 400,height: 200},cssAfter: {zIndex: 0},delay: -3000});

$('#ke2').cycle({fx: 'custom',cssBefore: {top:0,left: 0,width: 0,height: 0,zIndex: 1},animIn:{width: 400,height: 200},animOut:{top:200,left: 200,width: 0,height: 0},cssAfter:{zIndex: 0},delay: -1000});

$('#ke2').cycle({fx:'shuffle',shuffle: {top:-280,left: 280},easing:'backinout',delay: -2000});

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

$(function(){$('#ke2').cycle({fx:'cover',delay:-2000,cssBefore:{opacity:1 },animOut:{ opacity: 0 }});});

$('#ke2').cycle('wipe');

$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,delay:-4000,clip:'l2r'});

$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,clip:'zoom'});

Sekedar tambahan, trik ini juga bisa di pasang di bagian home page dengan cara menambahkan ke widget HTML/Java script. Selamat berkreasi.


Semoga bermanfaat.