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

2013年07月04日

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

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

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

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

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

変更点

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

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

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

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

デフォルト画像に対応

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

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

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

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

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

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

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

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

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

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

パラメータの変更

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

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

シンプルで良いですね。

こんな感じになります

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

「よし、じゃあ今から俺がそのプランの穴を教えてやろう」

すてき!!

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

というわけで

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

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


他にこんな事も書いてます

FBでコメント

コメント1つ

トラックバック/ピンバックはありません。