*

ウェッブ制作・パソコン

Width =px

ホーム > 変化を付ける小技 >
画像をスルッ!と拡大表示 lightbox MENU 

「lightbox」を利用して画像クリックで、スルッ!と拡大してポップアップ表示。

「lightbox」は、JavaScriptを利用したプログラム・ライブラリで手ごろにかつ簡易な設定で単体画像の表示やスライドショーで拡大表示が出来る。サイトへの設置は、2つの方法がある。

1.ライブラリをダウンロードしインストールダウンロード公式サイト

ダウンロード後、解凍してインストールします。

2.CDN(Content Delivery Network)サーバーから都度読み込む。

このサイトでは、CDNを利用している。

尚、WordPressには「Simple Lightbox」など幾つかのプラグインがあるが、個人的にプラグインは増やしたくないので使っていない。

例1 単独画像の拡大表示

ロンドン橋画像

例2 スライドショー

拡大表示は画像をクリックして下さい。

lightboxの設定

・jQueryのバージョンについて 5行目は当サイトで入れたかなり古いです。

・バージョンは1系、2系、3系とあるので、ご自身で決めて下さい。  参考サイト → リンク

画像にlightboxの設定

data-lightbox=”グループ名”
グループ名が同じ名前だと1つのグループとなる。例1:画像が1つの場合は、他の画像と重複しないように!。例2のサムネイル4個の場合、4画像共に同じ名前に。入力必須 漢字OK
data-title=”画像タイトル
拡大画像の左下表示されるタイトル。入力任意
alt=”代替テキスト”
画像の代替テキスト、出来るだけ入れましょう。
 

拡大画像をCSSでカスタマイズ

読み込んだCSSファイルは、「lightbox.css」で 約210行の比較的短いテキストです。このページで、拡大画像のキャプション部分をカストマイズして見ました。

 

オリジナルCSS

カスタマイズCSS

カスタムCSSはページのみに挿入するWordPressプラグインを利用。