画像をアップして表示するだけでパズルが作成できる
簡単javascript「jqPuzzle」

画像をサーバーにアップロードして、ホームページにimgタグとJavaScriptを3行追加すれば、スライドパズルが出来上がります。

使用方法

1.jqPuzzleからjquery.jqpuzzle.js、jquery.jqpuzzle.cssを、 jQueryからjquery.js(v1.2.1以上)をダウンロードします。
2.ホームページのサーバー(Webサーバー)に適当なフォルダー(例えば「jqp」など)を作り上記ファイルをアップロードします。
3.HTMLファイル(ホームページのファイル)のヘッダー部分(<head>〜</head>の間)に下の行を追加します。

(「jqp」はフォルダーの例です。)
4.あとは、パズルにしたい画像をアップロードして、imgタグにclass="jqPuzzle"を付け加えるだけです。

imgタグの例:<img src="画像ファイルのパス" alt="説明文" class="jqPuzzle">

サンプル

普通のスライドパズルです。
Numbersをクリックするとパネルの番号を表示できます。


リストボックスから画像名を選ぶとパズル画像を変更できます。


パズルのオプション
imgタグをclass="jqPuzzle  jqpオプション"と記述することで、表示の仕方を変更できます。
オプションの詳細リスト
オプションの記述方法
(例)フランス語、3行3列、穴中央(5番目のパネル)、数字・回数・秒を省略
<img src="画像パス" class="jqPuzzle jqp-fr-r3-c3-h5-NDE">

情報の参照元: >>jqPuzzle<<>>skare.net<<です。


おまけスクリプト

画像の変更スクリプト
この画像は、スクリプトでパズル化しているので、「iframe」にHTMLを書き出して表示しています。
また、表示する画像は「img」フォルダーの中に入っているものとします。

最初の画像を表示するための差し込み用ホームページ(gr1.html)

ここでは、最初に表示する画像を「iframe」に読み込むためのホームページ(HTML文書)を作成します。
ファイル名はiframeのsrc="ファイル名"で指定した名前(ここでは、gr1.html)で保存します。

前のページに戻る    ウインドーを閉じる