Cara Memindahkan Gambar Dengan jQuery

Text Resizer: Click for Resizer

Sesuai dengan judul diatas kali ini kita belajar mengenai beragam effect jQuery salah satunya ialah memindahkan gambar dengan jQuery atau yang lebih populer disebut Draggable Image With jQuery yang saya peroleh dari blog z33s. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar sesuai dengan keinginan kita pada gambar posting kita atau gambar di blog kita. Untuk lebih jelasnya klik tombol demo dibawah ini.

Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini:

1.log in dulu ke account blog sobat.
2.Pada dasbor pilih rancangan kemudian Edit HTML
3.Sekarang pasang Css kode dibawah ini diatas kode ]]></b:skin>

.drag_gambar img { cursor: move;}

4. selanjutnya simpan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function() {

$(&quot;div.drag_gambar img&quot;).draggable();

});

</script>

Keterangan : Perhatikan kode script berwarna Kuning diatas, jikan pada template kalian sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna merah nya.

5.Klik Simpan Template
6.Untuk penggunaannya pada gambar, kalian bisa menggunakan kode berikut :

<div class='drag_gambar'><img alt='KETERANGAN GAMBAR' src='URL GAMBAR'/></div>

Semoga bermanfaat dan selamat mencoba...

Artikel Terkait:

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Cara Memindahkan Gambar Dengan jQuery
Dalam Kategori : jQuery
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.