Membuat Slide Gambar Efek 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 sini.

Langkah pembuatannya :
1.    Cari kode  
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.

<script src="http://imdad.googlecode.com/files/animation1.js " type="text/javascript">
</script><script src="http://imdad.googlecode.com/files/animation2.js" type="text/javascript"></script>
<script src="http://imdad.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>

7.    Simpan / Save dan lihat hasilnya

Keterangan:
Ukuran Gambar Foto dapat diatur dengan merubah angka 232, 432, 200, 400

Selamat menikmati Slide Gambar Efek Terjatuh

Membuat Slide Gambar Efek Terjatuh Dengan jQuery 9 out of 10 based on 10 ratings. 9 user reviews.