Kamu dapat membuat puzzle sederhana dengan bermodalkan notepad saja.
Berikut langkah-langkahnya:
- Download jQuery
- Download jQPuzzle
- Ekstrak file jqPuzzle.zip *letakkan dalam satu folder agar mempermudah*
- Masukkan file jquery-1.3.2.min.js dan hasil ekstrak jqPuzzle ke dalam satu folder
- Masukkan gambar yang kamu inginkan ke dalam folder yang telah dibuat
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqpuzzle.full.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />
</head>
<body>
<center>
<img src="nama_gambar.jpg" alt="keterangan_gambar" class="jqPuzzle jqp-r3-c5-h5" />
</center>
</body>
</html>
6. Simpan dengan nama index.htm pada folder tersebut
7. Jalankan file index.htm :D
Kalau kamu merasa puzzle kurang
Kamu cukup mengganti bagian ini class="jqPuzzle jqp-r3-c5-h5"
r3: jumlah baris
c5: jumlah kolom
h5: kotak kosong pada kotak nomor 5
Jadi jika kamu ingin membuat puzzle dengan 5 baris, 6 kolom dan kotak kosong pada nomor 10 maka kamu cukup mengganti kode diatas menjadi:
class="jqPuzzle jqp-r5-c6-h10"
Selamat menikmati puzzlemu :D
Sumber: jQPuzzle
Share on Facebook
No comments:
Post a Comment