Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。

Read more

最近あまり見なくなってきたし、個人的にも使う機会も減ったLightbox系のプラグインを久しぶりに探したついでにメモ。またいつか使うときのために・・・ライセンス形態と対応メディアも付けたのでそれなりに見やすいかもかもかも。

（デモもつけようと思ったけどめんどくさいからやめた・・・

jQuery LightBox plugin

いつものLightbox。お世話になった人も多そう。

ページ	アーカイブ・デモ
対応メディア	画像
ライセンス	MITライセンス
その他	ふつーのLightbox

ThickBox 3.1

jQueryと言えばのThickbox。当初iframeが使えたのはこれだけだったもんで色々表示してた記憶があります。

ページ	アーカイブ デモ
対応メディア	画像・iframe・Inline・Ajax・Youtubeとかも可
ライセンス	MITライセンス
その他	よく使われていたプラグインな印象

PrettyPhoto

角丸スタイルと拡大ボタンなどちょっとリッチなLightboxみたいなの。

ページ	アーカイブ・デモ
対応メディア	画像・SWF・Youtube・Vimeo・MOV・iframe・Inline
ライセンス	Creative Commons Attribution 2.5
その他	ギャラリー・スライドショー

jQuery.popeye 2.0

Lightboxみたいな効果を画像にインラインで埋め込めるかなり素敵プラグインやけどまだ使ったことないなー。。あ、WordPressプラグインで使ってみればいいのかも。

ページ	アーカイブデモ デモ
対応メディア	画像
ライセンス	GPL 2.0
その他	WordPressプラグインもあるよ

Shadowbox.js

商用は有償なだけあって多機能なやつ。

ページ	アーカイブ・デモ
対応メディア	画像・SWF・Youtube・MOV・Vimeo・FLV
ライセンス	Shadowbox.js License（商用$20～）
その他	jQuery以外の多数のフレームワークで動く

YoxView

表示が割ときれい。テーマをきれいにすればちょうどよくなりそうな気もする。。

ページ	アーカイブ・デモ
対応メディア	画像
ライセンス	MITライセンス
その他	多言語サポート

fancybox

スッキリしててみやすいさすがファンシー。

ページ	アーカイブ・デモ
対応メディア	画像
ライセンス	MITとGPLのデュアルライセンス
その他	個人的にこのみ

ColorBox

なにやら人気っぽいColorBox（Xmarks調べ）。テーマが5つ用意されていて簡単に見た目を変えられます。スライドショーとかギャラリーっぽい機能も。

ページ	アーカイブ デモ1・デモ2・デモ3・デモ4・デモ5 （デモによってスタイルが違う）
対応メディア	画像
ライセンス	MITライセンス
その他	オプションが豊富

使うならfancyboxかColorBoxかな。。。おれおれLightboxを汎用的にして公開する手もあるけど・・・おれおれと言えば「これからの新標準LightBox jDTLightBox.js」何の役にも立たへんLightboxもあるで・・・

ドロップダウンメニューが便利な場合もありますが、ドロップダウンしてるエリアからカーソルが離れた際の素っ気なさときたら・・・
とりあえずサンプル2つ用意したので比較してみてください。

比較用サンプル

素っ気ないドロップダウンメニュー
優しいドロップダウンメニュー

ちょっとした気遣いで優しいUIに

彼女（彼）とバイバイしたあと見えなくなるまで見守ったりしませんか？名残惜しい的なのでもいいです。振り返ったとき既にいないとか寂しいじゃないですか。そういう気持ちって重要じゃないですか。

UIにもそういう小さな優しさというか思いやりを持たせてあげましょう。普通のことですけどね。カーソルが離れてもすぐ消えずにちょっと待ってくれるドロップダウンメニューを簡単に実装できるコードを用意したので、ちょっとした優しさを持ってコピペで使ってやってください。

Read more

$(‘hoge’).css(‘backgroundPosition’)だとIEで値が取れないんですね、不便か。

XとYを別々に取得したい

値の検証

var bgPosDef = $('#hoge').css('backgroundPosition');

IE8まで（9は未検証）

console: null（空）

Firefox, Chrome, Safari, Operaなど

console: 50px 50px

IEは返されるデータがない！こういうところがみんなが嫌いな所以ですかね。IEはbackgroundPositionではなくて、backgroundPositionXのようにXかYを指定して個別に引き抜きます。

var bgPosX = $('#hoge').css('backgroundPositionX');
var bgPosY = $('#hoge').css('backgroundPositionY');

XとYを取得する

計算を行う場合は、数値にしておく必要があるのでついでに。

var bgPos = bgPosDef.split(' '), // 半スペで分ける
  // bgPos[0] == X, bgPos[1] == Y
  bgPosX = 0,
  bgPosY = 0;
bgPosX = bgPos[0].replace('px', '');
bgPosY = bgPos[1].replace('px', '');
// pxを削除する

IEはpxを削るだけです。

bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');

条件分岐で分ける

var bgPosDef = $('#hoge').css('backgroundPosition'),
  bgPosX = bgPosY = 0;
if ( bgPosDef ) { // backgroundPositionの値が取れた場合
  var bgPos = bgPosDef.split(' '),
  bgPosX = bgPos[0].replace('px', '');
  bgPosY = bgPos[1].replace('px', '');
} else { // 取れなかった場合
  bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
  bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');
}

これくらいはjQueryで対応してくれてもいいような気がしないでもない。。

はじめに、この記事は役に立つリンク集ではないです。

ブログを初めて2年ちょっとが過ぎ、半年くらいやるやる言ってやらなかったexValidationもようやく公開できたのもあって、自分の中で一段落したので、今まで公開したプラグインの振り返り等も兼ねて書きました。

そもそもは誰かの役に立てばいいなと思って始めたブログなので（ほとんど役に立たないものだと思いますけど）もしかするともしかしてどこかで誰かの役に立てるものもあるかもしれません。

ところで最初のプラグインを公開したときは、（JavaScript的な意味で）それはもう何も知りませんでした。そんな感じで今でも恥ずかしいコードなんですけど、最初の頃はもっと恥ずかしいコードなんですね。だから見ないで…

Read more