jqPuzzle memungkinkan kita dapat dengan mudah membuat sliding puzzles (teka-teki geser).

Setiap gambar dapat kita berikan efek jqPuzzle, dimana dengan menambahkan beberapa magic - jqPuzzle maka secara otomatis akan mengubahnya menjadi sebuah sliding puzzles!

Dan kita dapat menyesuaikan sliding puzzles ini sesuai dengan yang kita kebutuhkan.



Ada tiga cara alternatif untuk mengatur Sliding Puzzles ini:

Option 1: The easy way – Menambahkan class name
Option 2: Basic configuration – Menggunakan CSS micro format
Option 3: Full control – Sintaks jQuery plugin

Demo – Sliding Puzzles

The easy way: Menambahkan class name

Option 1: The easy way – Menambahkan class name

Dapat dengan mudah diimplementasikan hanya dengan menambahkan class = "jqPuzzle" ke dalam tag gambar.

Contoh:
<img src="gambar.jpg" alt="Animals crossing" class="jqPuzzle" />

---

Basic configuration: Menggunakan CSS micro format

Option 2: Basic configuration – Menggunakan CSS micro format

Pilihan ini memungkinkan kita untuk mengontrol fitur yang paling penting dari jqPuzzle. Opsi ini merupakan pengembangan dari Opsi 1 dengan CSS mikro format. Format ini hanyalah sebuah class name kedua yang diterapkan untuk tag gambar. Sintaks untuk CSS mikro format adalah sebagai berikut:

jqp[-LANGUAGE]-rROWS-cCOLS[-hHOLE][-sSHUFFLE_ROUNDS][-FLAGS]

Ganti semua kata dengan real value, sedangkan property dalam kurung [] merupakan value yang dapat dikonfigurasikan.

    LANGUAGE: Language code. See the list of supported languages. Defaults to English.
    ROWS: Number of rows (from 3 to 9).
    COLS: Number of columns (from 3 to 9).
    HOLE: Position of the hole (from 1 to rows*columns), defaults to the last (bottom right) position.
    SHUFFLE ROUNDS: Number of shuffle rounds, defaults to 3.
    FLAGS: Additional options. List as many flags as you want, in any order:
        S: Initially shuffle pieces.
        N: Initially hide numbers.
        A: Hide 'Shuffle' button.
        B: Hide 'Original' button.
        C: Hide 'Numbers' button.
        D: Hide 'moves' display.
        E: Hide 'seconds' display.

Contoh 1: 3 rows, 5 columns, hole at position 5
<img src="gambar.jpg" alt="Animals crossing" class="jqPuzzle jqp-r3-c5-h5" />

Contoh 2: German, 5 rows, 5 columns
<img src="gambar.jpg" alt="Animals crossing" class="jqPuzzle jqp-de-r5-c5" />

Contoh 3: 4 rows, 4 columns, 1 shuffle round
<img src="gambar.jpg" alt="Animals crossing" class="jqPuzzle jqp-r4-c4-s1" />

Contoh 4: French, 3 rows, 3 columns, hole at position 5, initially hide numbers, hide moves/seconds display
<img src="gambar.jpg" alt="Animals crossing" class="jqPuzzle jqp-fr-r3-c3-h5-NDE" />

Contoh 5: German, 5 rows, 7 columns, initially shuffle pieces, hide shuffle button and seconds display
<img src="gambar.jpg" alt="Animals crossing" class="jqPuzzle jqp-de-r5-c7-SAE" />

---

Full control: Sintaks jQuery plugin

Option 3: Full control – Sintaks jQuery plugin

Dengan pilihan ini, kita dapat sepenuhnya mengontrol semua fitur dari sliding puzzles. jqPuzzle diimplementasikan sebagai jQuery plugin biasa. Hal ini dapat dimanfaatkan untuk menambah metode baru pada objek jQuery.

Tempatkan pemanggilan fungsi dalam $(document).ready() structure untuk memastikan DOM sudah siap dimuat. Juga pastikan bahwa tag <script> ditempatkan di suatu tempat, termasuk file HTML.

Berikut ini contoh sintaks Plugin tanpa parameter:

<script type="text/javascript">
    $(document).ready(function() {
        $('img').jqPuzzle(); // apply to all images
    });
</script>

Selainitu kita juga bisa menggunakan selectors yang berbeda seperti $('#box img') (berlaku untuk semua gambar dalam '# box') atau $('.puzzle') (Berlaku untuk semua gambar dengan class name 'puzzle'). Lihat halaman sumber untuk informasi lebih lanjut »

Sedangkan untuk membuat Sliding Puzzles ini kita hanya memerlukan file-file berikut:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqpuzzle.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

More Detail

jqPuzzle dilengkapi dengan file CSS yang mencakup tema standar. Dengan ukuran gambar yang ada, kita mungkin ingin menyesuaikan beberapa ukuran, seperti ukuran font atau mengubah tampilan keseluruhan dari sliding puzzle. Beberapa sifat CSS diatur oleh script jqPuzzle itu sendiri untuk memastikan bahwa sliding puzzle tersebut berfungsi dengan baik. Properti ini dapat diganti user-defined properti.

Kita juga dapat merubah gaya sliding puzzle ini berdasarkan pada id gambar. Id akan ditugaskan untuk sliding puzzle setelah gambar asli dihapus. Dengan cara ini kita bisa memberikan gaya individual pada setiap puzzle menggunakan CSS selectors yang dimulai dengan #ImageId dan bukan .jqPuzzle class pada umumnya. User-defined class names (termasuk CSS micro format) akan ditransfer ke puzzle dan kita dapat menggunakannya untuk styling.

Beberapa sifat visual hanya dapat diatur melalui sintaks plugin dengan menambahkan gaya objek dalam pengaturan objek. Untuk melihat semua contoh dari metode ini, silahkan lihat halaman sumber »