Blogの画像表示方法をちょっとオシャレにしてみました。
さきほど、Syoさんから指摘があった黒画像表示事件は、この作業を試行錯誤している中で起きた想定外のトラブルです。
予想以上に手間取りました。
でも、↓の写真をクリックしてみてください、ちょっとカッコイイですよ。
ハマの番長にぐいーんとズームアップ的な。
今回お世話になったのは、下記のアプリとプラグインです。
こういう風に画像を表示するアプリの有名どころは「Lightbox」とか「litebox」なんですが、ここのBlogでは、他に「jQueryライブラリ」を使っているものがあるからか、「prototype.js」を使用するこれらのアプリは上手く使えないみたいなんです。
そこで、諦めかけていたところに、jQueryを使うLightboxのクローンアプリであるslimbox2を見つけて無事導入することができました。
もう一つのプラグインは、slimboxやLightboxで画像を表示させるのに必要な、rel="lightbox" 要素を自動的に<a>タグの中に挿入してくれるプラグインです。
備忘録も兼ねて使い方をメモメモ。以下、画像をアップロードする際の設定
- 画像を記事／ページに表示 → ON
- サムネイルを表示する → ON（このBlogでは400pxがデフォ）
- 大きな画像を別ウィンドウで開く → OFF
あ、もう一点、忘れていた。スライドショー的に複数の画像をまとめることができて、その場合は、まとめたい画像全部の<a>タグの中に、rel="lightbox[hogehoge]"※hogehogeはグループ名・この同じグループ名の画像がまとめられるを入れればOKということで。
なんかの勢いで、一応、このBlogに掲載している画像の表示も同じように変更しました。
ていうか、過去の記事の画像はリンクが切れていたりしたので、その修正にも時間がかかったりなんかしたり。
でも、多分、漏れとかあるんだろうなぁ……