画像をアップして表示するだけでパズルが作成できる
簡単javascript「jqPuzzle」
画像をサーバーにアップロードして、ホームページにimgタグとJavaScriptを３行追加すれば、スライドパズルが出来上がります。
使用方法
１．jqPuzzleからjquery.jqpuzzle.js、jquery.jqpuzzle.cssを、
jQueryからjquery.js（v1.2.1以上）をダウンロードします。
２．ホームページのサーバー（Webサーバー）に適当なフォルダー（例えば「jqp」など）を作り上記ファイルをアップロードします。
３．HTMLファイル（ホームページのファイル）のヘッダー部分（<head>〜</head>の間）に下の行を追加します。
（「jqp」はフォルダーの例です。）
４．あとは、パズルにしたい画像をアップロードして、imgタグにclass="jqPuzzle"を付け加えるだけです。
imgタグの例：<img src="画像ファイルのパス" alt="説明文" class="jqPuzzle">
サンプル
普通のスライドパズルです。
Numbersをクリックするとパネルの番号を表示できます。
小さい画像をクリックするとパズルの画像を変更できます。
【画像１】
【画像２】
【画像３】
【画像４】
【画像５】
パズルのオプション
imgタグをclass="jqPuzzle jqpオプション"と記述することで、表示の仕方を変更できます。
オプションの詳細リスト
- jqp[-言語]-r行-c列[-hあける場所][-sシャッフルの回数][-その他]
- 言語：en、fr、de、pt
- 行(r)：画像を区切る行数 (3 to 9)
- 列(c)：画像を区切る列数 (3 to 9)
- あける場所(h)：(1 to rows*columns)
- シャッフの回数(s)：デフォ3
- その他 * FLAGS: いろいろな効果を与える追加オプションのリスト
- S：最初からシャッフルする
- N：数字を消す
- A：シャッフルボタンを消す
- B：'Solution'ボタンを消す
- C：'Numbers'ボタンを消す
- D：'moves'を消す
- E：'seconds'を消す
オプションの記述方法
（例）フランス語、3行3列、穴中央（５番目のパネル）、数字・回数・秒を省略
<img src="画像パス" class="jqPuzzle jqp-fr-r3-c3-h5-NDE">
情報の参照元： ＞＞jqPuzzle＜＜ と ＞＞skare.net＜＜です。
おまけスクリプト
画像の変更スクリプト
この画像は、スクリプトでパズル化しているので、「iframe」にHTMLを書き出して表示しています。
また、表示する画像は「img」フォルダーの中に入っているものとします。
最初の画像を表示するための差し込み用ホームページ（gr1.html）
ここでは、最初に表示する画像を「iframe」に読み込むためのホームページ（HTML文書）を作成します。
ファイル名はiframeのsrc="ファイル名"で指定した名前（ここでは、gr1.html）で保存します。
前のページに戻る ウインドーを閉じる