29.jQuery実践課題④ ～モーダルで画像拡大表示－２～
jQueryで動きをつける
こちらもまずはコードを
$(function(){
const modal = $("#js-modal");
const overlay = $("#js-overlay");
const overImg =$('#open-img');
const miniImg =$('.js-open');
miniImg.click(function(){
const index = miniImg.index(this);
overImg.attr('src',$(miniImg[index]).attr('src'));
modal.fadeIn('slow');
overlay.fadeIn('slow');
return false;
});
$(window).click(function () {
modal.fadeOut('slow');
overlay.fadeOut('slow');
return false;
});
今回はほぼゼロから自分で書きました。まとめてみると何がなんだかという感じですが、やっていることはカンタンです。
いつも通り、ひとつずつ見ていきましょう。
miniImg.clickの処理
まずは、変数を定義して要素を取得していきます。
const modal = $("#js-modal");
const overlay = $("#js-overlay");
const overImg =$('#open-img');
const miniImg =$('.js-open');
最後の「miniImg」のみ、クラス名で要素を取得しているので、配列になっている事に注意してください。
miniImg.click(function(){
///処理///
});
miniImgのクリックを監視して、クリックされたら、処理を実行します。
miniImgは先ほどのクラス名「.js-open」で取得した要素達ですので、
その要素のいずれかがクリックされた場合に処理を実行します。
const index = $(miniImg).index(this);
.index(this);のthisはクリックされた要素を指定しています。
そして、.index()メソッドは引数に指定した要素が
配列の何番目なのかを数値で返してくれます。
つまり、この部分のコードは「.js-open」クラス名で取得した配列の中で、クリックされた要素が何番目なのかという数値をindex変数に代入する。
という事を行っています。
overImg.attr('src',$(miniImg[index]).attr('src'));
ここが今回の山場ですね。
まず、.attr(引数1、引数2)メソッドは、引数１に設定したい属性名、引数２に引数１で指定した属性に設定したい値を代入します。
ここでは、
引数１に「src」、引数２に「$(miniImg[index]).attr('src')」を指定しています。
$(miniImg[index]).attr('src')
ここでは、miniImg配列の要素をインデックスで指定して、.attr()メソッドでその要素の指定した属性(ここではsrc)を取得します。
間接的にクリックされた画像のsrcという事になります。
overImgは拡大表示するImg要素を代入しています。
そのsrc属性にクリックされた画像のsrcを設定する。
こうすることで、拡大表示される部分にクリックされた画像と同じファイルが指定されることになります。
設定はされていますが、まだ非表示なので表示されません。
modal.fadeIn('slow');
overlay.fadeIn('slow');
fadeIn()メソッドは前回も使いましたね。display:noneの要素を徐々に表示させるメソッドです。
ここまでの処理で準備の整った要素を表示させるわけです。
$(window).clickの処理
残りのコードについても見ていきましょう。
$(window).click(function () {
modal.fadeOut('slow');
overlay.fadeOut('slow');
return false;
});
$(window).click(function () {});
これは、ウィンドウのクリックを監視して、
クリックされたら引数に設定されたメソッドを実行します。
modal.fadeOut('slow');
overlay.fadeOut('slow');
fadeInの反対で、displayプロパティがnone以外の要素を徐々に非表示にするメソッドですね。
全体を改めて確認
拡大表示する処理
まず、変数に各要素を取得します。
拡大表示する処理
画像クリックを監視。クリックされたら、その画像のsrc属性を、「拡大表示するimg要素のsrc属性に設定」します。この段階ではまだdisplay:noneなので表示されません。
そして、設定が終わったら背景用のボックス要素とimg要素をfadeIn()メソッドで表示します。
画面をクリックするとモーダルを閉じる処理
ウィンドウのクリックを監視。クリックされたときに背景用のボックス要素とimg要素が表示されていたらfadeOut()メソッドで非表示にする。
２記事に渡って長々とHTMLとCSS、jQueryと書いてきましたがやっていることはこれだけですね。
今日のまとめ
- クラス指定で拡大表示するimg要素を配列で取得できる
- クリックされたimg要素が配列の何番目かを知るにはthisを使う
- srcを差し替えることで、拡大表示用の要素は１つで済む
- どこでもいいのでクリックされたらという処理は$(window).clickで実現可能
やりたかったクラス指定で処理することができました。これで後から画像が追加になっても、削除になってもid指定とは違い柔軟に対応できると思います。
とはいえ、こうしたよく使う機能は「プラグイン」？があるそうなので自分で０から書くこと自体はないと思います。
今回の課題で少し実力がついているなと実感できました。
では、また。
