サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページのモーダルウィンドウに、拡大画像をオーバーレイ表示する定番の画像ビューアです。Lightbox2は、JSフレームワークに、jQueryフレームワークを使用しています(旧版はPrototypeフレームワーク)。本ページは、現在の最新バージョンはv2.9.0を使って、表示された画像のモーダルウィンドウにSNSソーシャルボタンを設置してみました。ソーシャルボタンの設置の方法はつぎのとおりです。ここで扱うソーシャルボタンは、つぎの2つの設置方法があります。ボタンの設置は、いずれも公式SNSサイトに行くことなしに設置できます。オリジナルデザイン画像ボタンの設置:JSファイルは使用しないで、jQueryコードを使い設置します。プラグイン(JSファイル)を使い設置します。サイト)設置できるソーシャルボタンは、モーダルウィンドウ上では、フリーデザイン画像ボタンが15、公式ボタンが6種類(Twitter,Evernote不可)です。通常ページ上では、フリーデザイン画像ボタンが15、公式ボタンが8種類です。日本語版については、このサイトを参照。ダウンロードしたLightbox2(v2.9.0)ファイル名:lightbox2-master.zipを解凍し、下のように配置します。lightbox.cssとlightbox.jsがこのフォルダ内のLightbox用画像を参照する。※青字のファイルは、Lightbox2サイトからダウンロードしたdistフォルダ配下のファイルです。Network)のjQueryファイルを読み込んで使用することも可能です。jQueryファイルおよびLightbox2のCSSファイルをインクルードするタグを、HEADタグ内に書きます。lightbox-plus-jquery.min.jsを使用する(下表参照)。Lightbox2のJSファイルをインクルードするタグを、/BODYタグの直前に書きます。Lightbox2のJSファイルは、従来のファイルlightbox.jsの他に、新たにjQueryが含まれたファイルが提供されています。-->※ソース修正が必要な場合は、ソースコードが読み易いlightbox.jsを使用する。lightbox.min.jsは、改行なしで定義されているためソースコードが読み難いため、ソースの修正には向かない。CDNからjQueryをロードする)にします。lightbox.cssで、参照するprev.gif、next.gif、loading.gifおよびclose.gifのファイルのパスが正しいロケーションかをチェックします。ロケーションは、lightbox.cssから見た相対または絶対パスを設定します。表示したい画像のリンクタグ(Aタグ)に、data-lightbox="xxxxx"を追加します。XXXXXは、画像ごとに、ユニークなIDを使用します。border=0></a>data-lightbox="photo-1":画像ごとに、ユニークなIDを使用します。href=:表示画像のURLを設定します。data-title=:拡大オーバーレイ画像のパネルに表示されるタイトル(キャプション)を設定します。"data-title"の代わりに"title"も使用できます。その違いは、titleの場合、サムネール画像にマウスオーバーすると、キャプションが表示されますが、data-titleの場合は表示されません。src=:表示画像のサムネール画像のURLを設定します。height=:サムネールの大きさを好みにより設定します。サムネール画像を別に用意したときは不要。lightboxを使用します。border=0></a>data-lightbox="lightbox[group1]":グループIDは、グループ内で同じIDを設定します。href=:表示画像のURLを設定します。data-title=:拡大オーバーレイ画像のパネルに表示されるタイトル(キャプション)を設定します。"data-title"の代わりに"title"も使用できます。src=:表示画像のサムネール画像のURLを設定します。height=:サムネールの大きさを好みにより設定します。})</script></body></html>(注1)ドキュメントタイプは、例のように書きます。日本語を扱う場合は、charsetをUTF-8とし、ソースコードもUTF-8とします。(注2)ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。(注3)使用する画像の大きさは、PCの画面からはみ出ない大きさにします。})</script></body></html>(注1)ドキュメントタイプは、例のように書きます。日本語を扱う場合は、charsetをUTF-8とし、ソースコードもUTF-8とします。(注2)ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。(注3)使用する画像の大きさは、PCの画面からはみ出ない大きさにします。LightboxのダウンロードLightbox2サイトのDownloadボタンをクリックしダウンロードします。ファイル名=lightbox2-master.zip)ダウンロード画面)Lightbox2.9.0のカスタマイズ(応用編)修正例Lightboxページの背景の色(デフォルト:白)を変えるなど、Lightboxのカスタマイズ方法を述べます。下の画像は、Lightbox表示画面(モーダルウィンドウ)の構造を示したものです。(1)~(9)の名称はモーダルウィンドウを構成するDIVブロックのCLASS名です。※#lightboxOverlayと#lightboxの画面は同じ大きさです。従い白色の囲い枠は実際にはありません。48*/※値は、0から100。位置はほぼ中央が48%、それより小さい値の場合は上の方に、大きい値の場合は下の方に配置されます。absolute;を追加する。/*NEXT/PREVボタンを常に表示したい場合修正。/*NEXT/PREVボタンを常に表示したい場合修正。/*マイナス値を指定する。/*NEXT/PREVボタンを常に表示したい場合修正。/*NEXT/PREVボタンを常に表示したい場合修正。rightの値はマイナス値で単位pxを付けます。※通常、NEXT/PREVボタンは、マウスオーバーした場合に表示されますが、NEXT/PREVボタンを画像の外に出した場合は、常に表示するのもよいでしょう。ナビゲーション矢印アイコンを常に表示する(※2)。trueの場合、左と右のナビゲーション矢印を最初と最後の画像に来た時でも表示します。複数の写真をグループにして表示する場合、画面の左下に表示される何枚目表示。