今回は light box 風に画像表示をする仕組みを実際に作ってみましょう。
今までは比較的短いスクリプトで動作をするものでしたが、今回からは実践編ということで、スクリプトが長くなり、ちょっとだけ複雑になります。
でも一つずつ分解して理解していけば難しいことはありません。
自分で実際にコードとスクリプトを書いてみたり、構造を紙に書いて整理するなどして、理解できるように工夫しながら学習を進めましょう！
※HTML, CSS, jQuery の基礎からやり直したい人は以下を先に読んでください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
モーダルウィンドウで画像を拡大表示させる
完成形はこんな感じになります
See the Pen
lightbox1 by taichi (@taichi_na)
on CodePen.
上の例が、これから作っていくものです。
動きをじっくり観察してみてください。
小さな画像をクリックしたときに動きが生じるようになっていますね。
クリックされると全画面が暗転し、大きな画像が中央に表示されます。
そして、画像以外のところをクリックすると、すべて消えて元通りになる、この流れを考えながら HTML, CSS を書いていきましょう。
基本となる HTML を作っていく
See the Pen
lightbox2 by taichi (@taichi_na)
on CodePen.
HTML はいたってシンプルです。
サムネイル画像はリストの中に入っていて、それぞれ大きな画像へのリンクがついています。
大人の事情で、リンクのパスが長くなっていて見にくくなっていますが…
お気づきだと思いますが、暗転させるための背景や、大きな画像を表示させるための枠もHTML には書かれていません。
その二つは、 CSS にはセレクタとプロパティ、値だけを用意しておいて、HTML へは jQuery からの命令で書いていく（クリックしたときに書かれる）ようにします。
CSSで体裁を整える
See the Pen
lightbox2 by taichi (@taichi_na)
on CodePen.
CSS で全体を中央に寄せ、サムネイル画像を小さくし、横一列に並べます。
ここまでは大丈夫だと思います。
注目してほしいのは、下の二つのセレクタです。
#bg
#photo
これらは HTML には記述がありませんでした。後ほど jQuery を使って生成させるということです。<body> 内に以下のような要素を生成させるということですね。
<div id=”bg”>
<div id=”photo”>
この二つが生成されたときに反映される装飾を、あらかじめ CSS に書いておくということです。
理解できたでしょうか？
jQuery で動きをつける
See the Pen
lightbox1 by taichi (@taichi_na)
on CodePen.
上のスクリプト内に番号を付けたので、それに沿って解説していきます。
1. $(“a”).click(function () {
これはおなじみの記述ですね。指定したセレクタ(“a”)をクリックしたときに、以下の関数を実行します、というスクリプト
2. $(“body”).append(‘<div id=”bg”>’);
$(“body”).append(‘<div id=”photo”>’);
<body>内に、<div id=”bg”>と<div id=”photo”>を書き加える命令です。
append() は指定したセレクタ内に、引数の内容を記述します。
3. $(“#bg”).hide();
$(“#photo”).hide();
せっかく追加した2つの要素を一度消してしまいます。この後でフェードインさせたいからですね。
4. $(“#photo”).html(“<img>”);
<div id=”photo”>内に<img>を追加します。
5. $(“#photo img”).attr(“src”, $(this).attr(“href”));
$(“#photo img”).attr(“width”, 320);
$(“#photo img”).attr(“height”, 240);
$(“#photo img”).attr(“alt”, “Photo”);
追加した <img> 要素内に属性と属性値を追加していきます。
1列目の後半（青地）は「クリックされた a の href 属性値を取得」しそれを今回表示させる<img>の src=”~” に入れてやる、ということです。
6. $(“#bg”).fadeIn();
$(“#photo”).fadeIn();
準備ができたのでフェードインさせます。
それぞれどのような見た目になるのかを、CSS で確認してみてください。
#photoには先ほど画像を表示させるように中身を追加しましたね。
7. $(“#bg”).click(function () {
$(this).fadeOut(function () {
$(this).remove();
});
$(“#photo”).fadeOut(function () {
$(this).remove();
});
今度は背景をクリックしたときに、表示されている画像を消すためのスクリプトです。
背景である<div id=”bg”>の部分をクリックすると、それ（#bg）自体と、#photo がフェードアウトし、HTML からも要素が消去されます。（要素を消去しないと、HTML内にどんどん <div id=”bg”> <div id=”photo”> がたまってしまうからです）
まとめ：一つずつ確認して組み立てていこう！
See the Pen
lightbox1 by taichi (@taichi_na)
on CodePen.
ということで、モーダルウィンドウで拡大画像を表示させるスクリプトの学習をしました。
とくに難しい部分はありませんでしたが、長くなってくると混乱してくるので、途中で一度表示させるなどして、狙い通りにスクリプトがかけているかをその都度たしかめるクセを付けるといいですよ。
