巷で話題のLightbox JSを導入。しかも v2.0。
rel="lightbox"が面倒くさい
ナマケモノだったりするのでアンカーにrel="lightbox"と記述するのが面倒くさいわけですね。ですので問答無用に画像系のリンクはすべてlightboxで出てくるようになっています。
アンカータグのhrefに含まれるURLの最後の拡張子を判別する処理を行っています。
で、今回はとりあえず、拡張子が"jpg"、"gif"、"png"、"ico"の場合にlightbox起動という具合になっています。過去にブログとかで画像投稿しまくってrel="lightbox"入れるの面倒くさいって人にはちょうど良いかもなーな方法です。
弊害としては、lightbox v2.0の魅力的な機能の一つイメージグループ機能が死んでしまうことでしょうか…この辺修正したい。
大きい画像がはみ出しました
さて、これはもう別に自分がやらなくても誰かやってると思うので、ソースを参考に作ってしまえば良かったんですけど、どうせなら自分でやってしまうかということで自力で実装。
例えば、スクリーンショットとかを載せる場合などに重宝するかもしれません。
開く画像が画面より大きいなと判断したら自動で小さくなります。ついでに、オリジナル画像へのリンクボタンが現れます(同じウインドウで開くボタンと別ウインドウで開くボタン)。
何気に、縦・横両方がはみ出す場合の処理が面倒くさかったりしました。
ボタンにロールオーバー機能つけたかったので例のテキストリンクで背景画像ずらし使っています。
ちょっと奇妙なCSSになってたりしますけど(ボタンの重なりあたり)。
姑息なCSS書き出し
ついで、といっては何ですがlightbox用CSSもJavaScriptで書き出してます。理由はCSSがValidじゃ…云々。
まとめ
そもそも、lightbox導入の理由は以前から気になっていた「strictで組んだHTMLにtarget="_blank"が使えない」というものでした。画像へのリンクが同じウインドウで開くために誤ってウインドウを閉じてしまう失敗を何度も繰り返していました。
この失敗を画像へのリンクにワンクッションおくことと、オリジナル画像を開く前に告知する(オリジナルを開くボタンを設ける)ことで回避したわけです。
ついでに同じウインドウで開くか別窓で開くか選択肢を設けるポリシーを盛り込んだ次第です。
とはいえ、このスクリプトちょっと重すぎるなーと思う今日この頃です。
興味ある人はソースを覗いて盗んでいってください。しっかり配布できるほどちゃんとした書き方してないので。触ったのは以下二点と画像追加です。適当に改造してLightBoxな日々をEnjoyして下さい。
- lightbox.js
- lightbbox.css
- 画像リンクボタン(右クリック→保存)
