Image Gallery Menggunakan Jquery 1.4.2

Lagi jalan-jalan ke blog sahabat, secara tidak sengaja saya menemukantrik menarik tentang macam-macam efek image gallery menggunakanJquery 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.

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/AVvXsEjHMq0DpBvBDa1PN35rTUzOLTnDzkymK4sxUBWGKA8Ex5soRYSpIedF_NwfBZE0WzqV78eY2TPCvCHiDdtxgz_O4J0CgpfBoLr7emHa0hHl-utznrBPBHZUIqdn7KwQaANiJbdA5QAiBum8/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/AVvXsEhFA8jqkO9b9cew9W5fEaPZrN8k_OrSR1fRzgQIBpBjJRu01ss963Vj5NuKAHHeeIIllvtSH0lDqq61Y6L4yKknCBC9s1pQjhVNmFQaKskKpEsvw1rp3ar5TxN9u2dHiYh-SLH3NNBQ75k/s1600/iphone4.jpeg.jpg" width="400" />

<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuFLmT5sqECx2pndK6chpK-zojFZPL-TT1O6E_784l49y4BQGhtrZsqFyloGj6fE5Nj3g7HGAM5TAdzmk8iC0Q69yRktEmpjgXxVkE1HQIrdaSrdyDWW25HhBKJNCNviaaI_IYPIUAjhVC/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.

Artikel Terkait: