集中線を追加するjQueryプラグイン「Booom」がバージョンアップ

ちょっと前に作った、画像に集中線を追加するプラグイン「Booom」を改修しました。

画像に集中線を追加するだけのネタプラグインですけどね。

SS | 集中線を画像に追加するプラグインを作りました

バージョンアップで使いやすく

元々やろうと思ってたけどやってなかったことをやったのと、ついにちゃんとした集中線をくれた方がいたのですげーそれっぽくなりました！やっぱちゃんとした画像だと違うね。

変更点

• ステキな集中線画像に変更
• デフォルト画像の対応
• 集中線画像のサイズ仕様を変更
• パラメータの変更

ついにまともな画像になりました

まず、画像を頂きました。これマジ嬉しい♪

昨日、僕が以前に作ったスライドを見てくれた sejiijes(@sejiijes)さんのブログを見たら、ご自分で描かれた集中線のページへのリンクがあって、「これやっ！わいが求めとったんはこれや！」な感じで、使用許可のお願いをしたら快諾して頂いたので、ありがたく使わせてもらいました。 sejiijes さんありがとうございます！

デフォルト画像に対応

あとね、せっかくステキな画像になった事だし、デフォルト画像に設定しました。

実は自分でちゃんと分かってたんですけど、このプラグイン、今まで自分で画像をどっかに置いてパラメータで設定しないとほぼ使えなかったんですよね(^▽^;) 分かってたんですけど「まぁネタだしｗ」程度の軽い気持ちで放っておいてました。というか、あの時は1秒でも早く公開したかったんだよね。ネタは鮮度命ですよね。

というわけで、今回はデフォルト画像に対応しました。今後は jquery.js と booom.js を読み込めば、

$(function(){
  $(element).booom();
});

これだけでちゃんと集中線が表示されます。画像いらない。

デフォルト値に base64エンコードした画像を使用しました。

このアイデアはTwitterで困ったツイートをしたときによくアドバイスをくれる lunchub（@lunchub）さんに頂きました。ありがとうございます！

@anticyborg あと、画像をbase64変換して、予めdefaultオプションに埋め込んでおけば、ユーザーが画像を配置しなくて済むとおもいます！— lunchub (@lunchub) June 19, 2013

いやー人間、他の人との繋がりが大事だと心底思いますね。

集中線画像のサイズ仕様を変更

以前の集中線は、問答無用で集中線の画像サイズを元の画像の2倍にしてたんですね。2倍にすれば、仮に一番左上に中心点を置いても集中線画像が切れてしまうことはありません。ステキ！

パラメータの変更

以前はオプションパラメータがよく分からん感じになってましたので、それを整理しました。てか必要なのはずらす値と画像パスだけでしょ？ってことで、パラメータは以下の3つに。

path	画像のパス。読み込んでるhtmlからのパスになります。 指定がない場合はデフォルト画像を使用。
width	中心から横にどれだけずらすか。ｰ値も設定可能。
height	中心から縦にどれだけずらすか。ｰ値も設定可能。

シンプルで良いですね。

こんな感じになります

というわけで、生まれ変わった booom.js を使うとこんな感じになります。

すてき！！

つよぽん(Powered by PAKUTASO)かっこいいＯ(≧▽≦)Ｏ

というわけで

今後とも画像に集中線を追加するプラグイン「booom.js」をよろしくお願いします。

集中線を追加するjQueryプラグイン「Booom」をダウンロード