.....:::::Di blog exyezet banyak trik yang sangat menarik dan gampang untuk di pelajari, apabila ada kesulitan tanyakan saja pada exyezet . Terima kasih::::....

Senin, 25 April 2011

Browse » Home » » Image Gallery Menggunakan Jquery 1.4.2

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:

Diposting oleh Yudy
Label:

Comments :

0 komentar to “Image Gallery Menggunakan Jquery 1.4.2”

Posting Komentar

Jangan lupa di follow dan tinggalkan komentar
Komentar anda sangat bermanfaat untuk perkembangan blog ini. Gunakanlah kata kata sopan dan santun. Terimakasih.....

Langganan: Posting Komentar (Atom)

IP MU

IP
 

Copyright © 2009 by EXYEZET


Powered by Blogger | Green Magazine by EXYEZET