「lightbox」を利用して画像クリックで、スルッ!と拡大してポップアップ表示。
「lightbox」は、JavaScriptを利用したプログラム・ライブラリで手ごろにかつ簡易な設定で単体画像の表示やスライドショーで拡大表示が出来る。サイトへの設置は、2つの方法がある。
1.ライブラリをダウンロードしインストールダウンロード公式サイト
ダウンロード後、解凍してインストールします。
2.CDN(Content Delivery Network)サーバーから都度読み込む。
このサイトでは、CDNを利用している。
尚、WordPressには「Simple Lightbox」など幾つかのプラグインがあるが、個人的にプラグインは増やしたくないので使っていない。
lightboxの設定
1 2 3 4 5 6 7 8 |
<!-- lightbox2のCSSファイルの読み込み headタグの中に入れる --> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet"> <!-- jQueryスクリプトの読み込み 既に利用している場合は不要 headタグの中又はその後でも可 --> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!-- lightbox2スクリプトの読み込み headタグの中又はその後でも可 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script> |
・jQueryのバージョンについて 5行目は当サイトで入れたかなり古いです。
・バージョンは1系、2系、3系とあるので、ご自身で決めて下さい。 参考サイト → リンク
画像にlightboxの設定
1 2 |
<a href="url" data-lightbox="グループ名" data-title="画像タイトル"> <img src="url" alt="代替テキスト"></a> |
- data-lightbox=”グループ名”
- グループ名が同じ名前だと1つのグループとなる。例1:画像が1つの場合は、他の画像と重複しないように!。例2のサムネイル4個の場合、4画像共に同じ名前に。入力必須 漢字OK
- data-title=”画像タイトル
- 拡大画像の左下表示されるタイトル。入力任意
- alt=”代替テキスト”
- 画像の代替テキスト、出来るだけ入れましょう。
拡大画像をCSSでカスタマイズ
読み込んだCSSファイルは、「lightbox.css」で 約210行の比較的短いテキストです。このページで、拡大画像のキャプション部分をカストマイズして見ました。
オリジナルCSS
1 2 3 4 5 |
.lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; } |
カスタマイズCSS
1 2 3 4 |
.lb-data .lb-caption { font-size: 18px; line-height: 1.5em; } |
カスタムCSSはページのみに挿入するWordPressプラグインを利用。