画像をパズルにしてくれるプラグイン

2015.12.25　Posted by Coding_team

Webプログラミング

こんにちは。

第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="サンタ">

1	<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="サンタ">

1	<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番目が非表示でパズルの数字が消えてシャッフルされてる状態

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);