News Update :

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="http://1.bp.blogspot.com/_JiNZqyAPP_o/TA9xn6NMO4I/AAAAAAAAA48/KQ6Tg-b4I5s/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="http://3.bp.blogspot.com/_zSCxm18-wUA/TGZaYgoAnsI/AAAAAAAAACA/930PFnLp_hM/s1600/iphone4.jpeg.jpg" width="400" />
<img height="200" src="http://2.bp.blogspot.com/-fsJNO9GOm44/TWYebzUoAcI/AAAAAAAAAE8/ZJ2a2wqX3KY/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.
Alhamdulillah...

comment 15 Komentar on "Image Gallery Menggunakan Jquery 1.4.2"

  • ini dia yg saya cari.. thanks info nya...:-*

    ohh iya.. udah saya follow juga blog ny ;;)

  • semangat terus gan,Salam Blogger Indonesia

  • informasinya luar biasa sangat bermanfaat sekali...
    Banyak sekali ilmu pengetahuan yang saya dapatkan
    Terimakasih banyak atas informasinya ...
    Semoga semakin sukses

  • informasinya sangat bagus sekali...
    saya suka..
    banyak pengetahuan yang saya dapatkan setelah saya berkunjung ke blog ini....

  • terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga semakin sukses nya

  • terimakasih banyak info nya
    Bermanfaat sekali
    Semoga sukses

  • artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.


  • makasih infonya sangat bermanfaat

  • Hai..
    kita dari agen poker online papadomino mau memberitahukan bahwa sekarang sedang ada promo bonus yaitu :
    * Bonus Minguuan : 0.5% (setiap senin)
    * Bonus Referral : 20% (seumur hidup)

    Hanya dengan minimal depo & wd Rp 20.000,-
    Proses depo / wd cepat
    100% PLAYER VS PLAYER Tanpa ROBOT
    link pendaftaran : http://papadomino.com/?ref=jesica6413
    Untuk info lebih lanjut silahkan hubungi : 2B4A514B

    * Buat yang suka bermain togel silahkan kunjungi http://www.papa4d2.com/ref.php?ref=jesica
    ;)
    judi poker
    bandar poker
    domino online
    agen poker online
    poker online
    capsa susun
    poker online terpecaya

  • Leave Your Comment

     
    site kreator
    © Copyright Indriawan dot Com | Informasi Dan Berita Online 2013 | Design by Fery Eka Indriawan | Powered by Blogger