Lightbox2のインストール

画像やリンクなどをクリックして、ウィンドウ内で画像を拡大表示する
　　画面が遷移せず、同一ウィンドウ内に表示されるのが特徴
　　　　無駄なクリック作業が無くなる

　　（１）【Lightbox2】のダウンロード
　　　　このサイトからダウンロードする　http://lokeshdhakar.com/projects/lightbox2/
　　　　　　ダウンロード完了後に解凍する

　　（２）Ｊａｖａスクリプトを設定する
　　　　スクリプトファイルをＨＴＭＬに施す
　　　　(例題）ダウンロードした中から探し出す
　　　　＜script src=”../js/jquery-1.11.0.min.js” type=”text/javascript”＞＜/script＞
　　　　＜script src=”../js/lightbox.js” type=”text/javascript”＞＜/script＞

　　　　必要な場所に設置し、ＨＴＭＬで定義する
　　　　　　指定する順序はこのまま

　　（３）ＣＳＳファイルを設定する
　　　　(例題）ダウンロードした中から探し出す
　　　　ＣＳＳファイルに定義を追加する　【@import url(‘lightbox.css’);】

　　（３）表示したい画像の定義
　　　　(例題）
　　　　＜a href=”img/image-1.jpg” data-lightbox=”group” data-title=”１枚目”＞写真１＜/a＞
　　　　＜a href=”img/image-2.jpg” data-lightbox=”group” data-title=”２枚目”＞写真２＜/a＞

　　　　【data-lightbox】を使ってグループ定義を施す
　　　　　　各々異なるモノを設定すると・・・・・・１個、１個個別に拡大表示される
　　　　　　　　※今回は統一した（１個なら個別表示、複数個なら連続表示となる）
　　　　　　同じモノを設定すると同一グループと見なされて、クリックすると次々と画像が表示される

　　　　通常は小さな画像を先に表示し、クリックして拡大表示する
　　　　　　※今回は小さな画像を作成する手間を省き、文字をクリックさせて画像を表示させる
　　　　　　必要なら＜img src=”../img/thumb-image-1.jpg”＞を「写真１」の所に入れる