Lightbox JS v2.0 導入しつつ改造 - LogJET
Lightbox JS v2.0 導入しつつ改造
巷で話題のLightbox JSLightbox JSのリンクを新しいウインドウで開くを導入。しかも v2.0。
* lightbox用サムネイル1
* lightbox用サムネイル2
* lightbox用サムネイル3
* lightbox用サムネイル4
* lightbox用サムネイル5
* lightbox用サムネイル6
* lightbox用サムネイル7
* lightbox用サムネイル8
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用サムネイル9そもそも、lightbox導入の理由は以前から気になっていた「strictで組んだHTMLにtarget="_blank"が使えない」というものでした。画像へのリンクが同じウインドウで開くために誤ってウインドウを閉じてしまう失敗を何度も繰り返していました。
この失敗を画像へのリンクにワンクッションおくことと、オリジナル画像を開く前に告知する(オリジナルを開くボタンを設ける)ことで回避したわけです。
ついでに同じウインドウで開くか別窓で開くか選択肢を設けるポリシーポリシーのリンクを新しいウインドウで開くを盛り込んだ次第です。
とはいえ、このスクリプトちょっと重すぎるなーと思う今日この頃です。
興味ある人はソースを覗いて盗んでいってください。しっかり配布できるほどちゃんとした書き方してないので。触ったのは以下二点と画像追加です。適当に改造してLightBoxな日々をEnjoyして下さい。
* lightbox.jslightbox.jsのリンクを新しいウインドウで開く
* lightbbox.csslightbbox.cssのリンクを新しいウインドウで開く
* 画像リンクボタン(右クリック→保存)
