東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2015.12.25 Posted by

こんにちは。

第19回目になりました。

クリスマスですね!

クリスマスと言えばサンタですね!!

サンタといえば、パズルですね(?)

ということで、画像をパズルにしてくれるプラグインを紹介します。

jqPuzzle – Customizable Sliding Puzzles with jQuery

http://www.2meter3.de/jqPuzzle/index.html

2008年と7年前にもうこのプラグインがあったことが驚きですね…。

jQueryの対応バージョンも1.2系~1.8系までなら問題なく動きました。

導入はいたって簡単です。

上記のURLからzipをダウンロードし、それらを読み込ませて画像にクラスをつけるだけです。

このプラグインの素晴らしいところは、クラスを変えていくだけでJSのオプションが切り替えられるというところです。

※多様なオプションがありますが、クラスで変えていく場合は限度がありますので、ご注意下さい。

デフォ(4×4のパズル)

5×5のパズルにしたい場合

クラスオプションの一例

もちろん、クラスを追加しなくても変更することは可能です。

以下一例

簡単ですね!

これで一人でも誰かと一緒でも楽しいクリスマスが過ごせますね!!

なお、ライセンスは以下になります。

jqPuzzle is dual-licensed under the GPL and MIT licenses.

簡単のから難しいのまで作ってみたので是非試してみてください。

※ハイレベル難易度はクリアしてません…。

以下DEMO

ノーマル難易度

ハイレベル難易度

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278