普段の日記も書いていきますが、最近はゲーム、模型の日記がメインになりつつあります。

2017/051234567891011121314151617181920212223242526272829302017/07

ホームページで使ってるLightboxのバージョンを変更したついでに
FC2ブログの方も入れ替えました。

バージョンは『2.04』から『2.51』に変わりました。

以前、導入したのが2010年1月11日だったので
結構バージョンが上がってました。
バージョンが上がったためかファイルの構成も変わってました。

やはり新しいバージョンだと以前のバージョンとは表示の仕方が少し変わってます。
IEからの表示で背景の暗幕表示にバグがあったのもだいぶ前に直っているようでしたので良かったです。

どういった手順で導入したか気になる人は続きをお読みいただければと思います。
まずは最新版のLightboxをダウンロードしてきます。
『Lightbox 2.51』は以下のURLからダウンロードできます。
http://lokeshdhakar.com/projects/lightbox2/

ファイルは以下の3ファイルの内容を自分のサイトに適した形に修正する必要があります。
  • ./css/lightbox.css
  • ./css/screen.css
  • ./js/lightbox.js
修正箇所は、png,gifの画像ファイルのパス部分を直せばOKです。

アップロードするファイルは、「.js」「.css」に関しては全て。
イメージファイルは以下の6つをアップロードすればOK
  • ./images/bullet.gif
  • ./images/loading.gif
  • ./images/bg-checker.png
  • ./images/close.png
  • ./images/next.png
  • ./images/prev.png

新しいバージョンのLightbox導入時にFC2ブログだと
ファイル名に「.」(ピリオド)が含まれるとアップロードできないファイルがあって
jQuery系のファイルのアップロードをどうしようかと思いましたが、
それに関してはホームページの方でアップロードした
ファイルを見るように変更して対処し、うまく動作させることができました。

後から調べてみるとjQuery系のファイルに関しては
CDN(コンテンツデリバリーネットワーク)サイトを利用して
そこのファイルを参照するようにして利用できるようにする方法もあったみたいです。

CDNサイトは以下の様な場所があります。

あとは、ブログやホームページの<head>タグ中に以下の3つのリンクを書けば導入完了。
  • lightbox.css
  • lightbox.js
  • jquery-1.7.2.min.js

実際の表示は過去のバージョンと同様に画像ファイルの<a>タグに以下の要素を記入しておけばOK
単体表示の場合:
<a href="~.jpg" rel="lightbox" title="画像のタイトル名"><img src="~.jpg" /></a>

複数表示の場合:
<a href="~.jpg" rel="lightbox[グループ名]" title="画像のタイトル名"><img src="~.jpg" /></a>
ブループ名が同じであればそれが1つの集まりとして複数枚の表示として表示できます。

大きい画像を表示するのに、
背景が真っ白の何もないところに画像だけが表示されるよりも
こうすることでちょっとでも見栄えが良くなり
とてもいいんじゃないかと思います。