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

ちょっと前に作った、画像に集中線を追加するプラグイン「Booom」を改修しました。
画像に集中線を追加するだけのネタプラグインですけどね。
バージョンアップで使いやすく
元々やろうと思ってたけどやってなかったことをやったのと、ついにちゃんとした集中線をくれた方がいたのですげーそれっぽくなりました!やっぱちゃんとした画像だと違うね。
変更点
- ステキな集中線画像に変更
- デフォルト画像の対応
- 集中線画像のサイズ仕様を変更
- パラメータの変更
ついにまともな画像になりました
まず、画像を頂きました。これマジ嬉しい♪
昨日、僕が以前に作ったスライドを見てくれた sejiijes(@sejiijes)さんのブログを見たら、ご自分で描かれた集中線のページへのリンクがあって、「これやっ!わいが求めとったんはこれや!」な感じで、使用許可のお願いをしたら快諾して頂いたので、ありがたく使わせてもらいました。 sejiijes さんありがとうございます!
デフォルト画像に対応
あとね、せっかくステキな画像になった事だし、デフォルト画像に設定しました。
実は自分でちゃんと分かってたんですけど、このプラグイン、今まで自分で画像をどっかに置いてパラメータで設定しないとほぼ使えなかったんですよね(^▽^;) 分かってたんですけど「まぁネタだしw」程度の軽い気持ちで放っておいてました。というか、あの時は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)かっこいいO(≧▽≦)O
というわけで
今後とも画像に集中線を追加するプラグイン「booom.js」をよろしくお願いします。
集中線を追加するjQueryプラグイン「Booom」をダウンロード
他にこんな事も書いてます
- JavaScript祭スピンオフ! フロントエンド祭り in Co-Edo でオブジェクトベースのJSについて話してきた
- 第5回 HTML5minutes! で話してきた
- 秋のJavaScript祭りで話をしてきた
- 春のJavaScript祭りでAngularJSについてお話ししてきました
- jQueryのwidth,height系メソッドの違いについて
- ローカルマシンにNode.jsをインストール
- jQueryでChromeの場合$(function(){]); が画像読み込み前に実行される場合の対応
- AngularJSでページロード時にコンパイル前のタグが表示されるのを防ぐ
- スクロールで隠れるナビゲーションメニューのJSがステキだったので勝手にプラグイン化しました
- スペースキーでスクロールする人のためのjQueryプラグイン作った
この記事の分類
種類: Web制作
ジャンル: javascript jQuery plugin 作った
FBでコメント
コメント1つ
トラックバック/ピンバックはありません。