Membuat gambar meledak

Membuat gambar meledak Pasti akan sedikit aneh dan unik karena ketika orang meng_klik Gambar tersebut maka gambar tersebut akan pecah dan menghilang hehehe contohnya seperti screenshot di bawah ini.

Gambar itu pecah / meledak saat di klik dan begitulah efeknya menjadi berkeping - keping hehehee kalau penasaran langsung saja ya liat sendiri demonya.

DEMO

Efek ini di peroleh dari Jquery dan juga Jquery UI emmm pokoknya mantap deh hehehehe mari kita langsung bahas kodenya.

1. Masuk ke dalam template
2. Masukan kode di bawah ini di atas kode </head>

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

<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$(".pecah").hide("explode", {pieces:36}, 2000);});
$("#show").click(function(){
$(".pecah").show("bounce", {direction:"up", times:4}, 200);});
});
</script>

Setelah itu Cari kode ]]></b:skin> dan simpan kode di bawah ini di atas kode tersebut.

.pecah{
margin: 0 auto;
width: 300px;
}
.pecah img{
display: block;
margin: 0 auto;
max-width: 100%;
}
#show{ 
text-align:center;
}

Setelah itu klik SIMPAN TEMPLATE Dan Berpindahlah ke Tata Letak atau Elemen Laman dan Tambah Gadget HTML/Javascript Lalu simpan kode di bawah ini di dalamnya.

<center><button id="show">Kembalikan gambarnya</button></center>
<div class="pecah">
<div id="hide">
<img src="URL gambar anda"/></div>
</div>

Nah setelah itu klik SIMPAN lalu Cek deh gambarnya dan coba klik. oh iya coba perhatikan kode click itu berfungsi saat gambar di klik maka gambar akan pecah jika anda ingin saat di sentuh mouse gambarnya pecah silahkan ganti dengan hover.

DEMO 2