1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」

サイト制作において重要なのは、訪問者を飽きさせず滞留させることでしょう。
この観点から言えばゲームなどがあってもいいのかもしれません。
jqPuzzleは1枚の画像からスライディングパズルを自動で作成します。

使用方法

jqPuzzleからjquery.jqpuzzle.js、jquery.jqpuzzle.cssを、jQueryからjquery.js（v1.2.1以上）をダウンロードします。


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

あとは、パズルにしたい画像にclass="jqPuzzle"を付与するだけです。

サンプル

Javascriptサンプルページ一覧

skuare.net

オプション

言語：en、fr、de
行：画像を区切る行数 (3 to 9)
列：画像を区切る列数 (3 to 9)
あける場所：(1 to rows*columns)
シャッフの回数：デフォ3
その他 * FLAGS: Additional options. List as many flags as you want, in any order:
- S：最初からシャッフルする
- N：数字を消す
- A：シャッフルボタンを消す
- B：'Solution'ボタンを消す
- C：'Numbers'ボタンを消す
- D：'moves'を消す
- E：'seconds'を消す

記述方法
例）フランス語、3行3列、穴中央、数字・回数・秒を省略


<img src="画像パス" class="jqPuzzle jqp-fr-r3-c3-h5-NDE">