こんにちは。
第19回目になりました。
クリスマスですね！
クリスマスと言えばサンタですね！！
サンタといえば、パズルですね（？）
ということで、画像をパズルにしてくれるプラグインを紹介します。
jqPuzzle – Customizable Sliding Puzzles with jQuery
http://www.2meter3.de/jqPuzzle/index.html
2008年と7年前にもうこのプラグインがあったことが驚きですね…。
jQueryの対応バージョンも1.2系～1.8系までなら問題なく動きました。
導入はいたって簡単です。
上記のURLからzipをダウンロードし、それらを読み込ませて画像にクラスをつけるだけです。
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css"> <script type="text/javascript" src="jquery.jqpuzzle.js"></script> <img class="jqPuzzle" src="img/santa.jpg" width="980" height="653" alt="サンタ">
このプラグインの素晴らしいところは、クラスを変えていくだけでJSのオプションが切り替えられるというところです。
※多様なオプションがありますが、クラスで変えていく場合は限度がありますので、ご注意下さい。
デフォ（4×4のパズル）
<img class="jqPuzzle" src="img/santa.jpg" width="980" height="653" alt="サンタ">
5×5のパズルにしたい場合
<img class="jqPuzzle jqp-r5-c5" src="img/santa.jpg" width="980" height="653" alt="サンタ">
クラスオプションの一例
r // パズルの行の数3～9 c // パズルの列の数3～9 h // 非表示にする場所 N // パズルの数字を消す S // 最初にシャッフルする jqp-r5-c5 // 5×5 jqp-r5-c5-h25 // 5×5で25番目が非表示 jqp-r5-c5-h25-NS // 5×5で25番目が非表示でパズルの数字が消えてシャッフルされてる状態
もちろん、クラスを追加しなくても変更することは可能です。
以下一例
var settings = {
rows: 3, // パズルの行の数3～9
cols: 3, // パズルの列の数3～9
hole: 9, // 非表示にする場所
shuffle: true, // 最初にシャッフルするかどうか
numbers: true, // ピースに番号をふるかどうか
language: 'en', // 言語
style: {
gridSize: 2, // ピースとピースの間のグリッド幅
backgroundOpacity: 0.3 // 非表示になってる部分の元画像の透過率
}
};
var texts = {
// ボタン等の文言変更
shuffleLabel: 'シャッフル',
toggleOriginalLabel: '元画像',
toggleNumbersLabel: '順番表示',
movesLabel: '動かした回数',
secondsLabel: '秒経過'
};
$('.demo img').jqPuzzle(settings, texts);
簡単ですね！
これで一人でも誰かと一緒でも楽しいクリスマスが過ごせますね！！
なお、ライセンスは以下になります。
jqPuzzle is dual-licensed under the GPL and MIT licenses.
簡単のから難しいのまで作ってみたので是非試してみてください。
※ハイレベル難易度はクリアしてません…。
以下DEMO