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"を付与するだけです。
オプション
　・言語：en、fr、de
　・行：画像を区切る行数 (3 to 9)
　・列：画像を区切る列数 (3 to 9)
　・あける場所：(1 to rows*columns)
　・シャッフの回数：デフォ3
　・その他
　　　S：最初からシャッフルする
　　　N：数字を消す
　　　A：シャッフルボタンを消す
　　　B：'Solution'ボタンを消す
　　　C：'Numbers'ボタンを消す
　　　D：'moves'を消す
　　　E：'seconds'を消す
記述方法
例）フランス語、3行3列、穴中央、数字・回数・秒を省略
<img src="画像パス" class="jqPuzzle jqp-fr-r3-c3-h5-NDE">
1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」サンプル

2007年10月17日

前の記事：テキストにグラデーションをかけるjavascript「Textgrad」
次の記事：コードをハイライト表示するjavascript「Chili」

関連記事

• 超簡単にパズルを作成するjavascript「Creating A Sliding Image Puzzle」
• 奥から手前にズームするJavaScript「Spacegallery.js」
• [jQuery]Galleria
• [jQuery]ScrollShow
• [jQuery]jQPanView

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」