25 Desember 2010

Membuat Slide Gambar Foto seperti terjatuh dengan jquery

Berbagai ragam dan model slide dapat saja tercipta berkat adanya penggunaan jquery. Mungkin sobat sering melihat gambar atau foto yang ditampilkan dalam bentuk slide pada blog yang anda kunjungi. Ini tentu dapat memberikan daya tarik bagi siapa saja yang melihat Bentuk slide foto tersebut diantaranya ada yang menggunakan efek transisi zoom, berjalan horizontal, vertical dan masih banyak lagi efek-efek yang tercipta dari kehandalan jquery ini.

Nah kali ini saya akan coba buat slide gambar foto terjatuh. Hasilnya bisa anda lihat di blog ini.

Langkah pembuatannya :
  1. Cari kode  </head>
  2. Pasang kode Jquery ini diatas kode tadi
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    (bila di dalam template anda sudah terpasang jquery, maka jangan lakukan langkah ini)
  3. Klik save
  4. Kemudian tambah gadget baru (Add new gadget)
  5. pilih HTML/JavaScript
  6. copy dan paste kode ini ke dalam gadget tadi.
  7. <script src=" http://kodecode.googlecode.com/files/animation1.js " type="text/javascript">
    </script><script src="http://kodecode.googlecode.com/files/animation2.js" type="text/javascript"></script>
    <script src="http://kodecode.googlecode.com/files/animation3.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">
    $('#ke2').cycle({fx:'scrollDown',speedIn:  2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});
    </script>
  8. Simpan / Save dan lihat hasilnya
Keterangan:
Ukuran Gambar Foto dapat diatur dengan merubah angka 232, 432, 200, 400

Selamat menikmati Slide Gambar Foto Terjatuh

4 komentar:

  1. keren..numpang copas ya brada..thx..sukses selalu

    BalasHapus
  2. @Koleksilagumidi, silahkan mas asal jangan lupa sertakan link sumbernya.

    BalasHapus
  3. mas numpang nanya.
    klo saya ganti link gambar dengan yang sudah ada di dalam folder yang saya punya dan dibuat absolute, itu tinggal kasih link k file nya kan??
    tapi g keluar, soalnya yg saya lihat mas rey pake gambar hasil upload.

    BalasHapus
  4. @dimas, asal penulisanya benar, bisa mas

    BalasHapus

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.