画像（サムネ画像）をクリックすると画像が切り替わり詳細がみれるjQuery

どうもRyokutyaです。

※このブログは自分で勉強したり、考えて作ったjQueryのことをアウトプットするために作った記事です。
ポートフォリオサイトやwebデザインの勉強をはじめて間もない方たちに少しでも役に立てたらと思い作りました。
必ずしも正しい書き方であったり、スマートな書き方ではない場合がありますのでご了承ください。

今回は「画像（サムネ画像）をクリックすると画像が切り替わり詳細がみれるjQuery」について紹介していきたいと思います。
ポートフォリオサイトなどよくある動きですよね。
実績などのサムネ画像が並んでいてクリックすると詳細が見られるといった動きです。
使える場面も多いと思いますのでよかったら使ってください。

デモ

まずは以下のデモをご覧ください。

コードの紹介

「どういう原理で動いてるとか興味ない！」「コード見ればだいたいわかるわぁ～」そんなせっかちさんのためにまずコードの紹介をしていきましょう！
コピペで使ってもよし、参考にして書き換えるもよしです。

HTML

          <div class="box_items">

          <div class="item">
            <div class="item_inner">
              <div class="item_img_case">
                <!-- ----- 表紙画像 ----- -->
                <img src="./img/elena/elena_pc表紙.png" alt="">
              </div><!-- /item_img_case -->
              <div class="item_p_case">
                <p>画像をクリックしてください</p>
                <p>元サイト様：Elena様サイト（制作：はとむぎ&緑茶）</p>
              </div><!-- /item_p_case -->
              
              <!-- 画像拡大表示-->
              <div class="zoom_container close">
                <div class="zoom_img_case close_resist">
                  <!-- ----- クリック時表示(画像) ----- -->
                  <img src="./img/elena/elena_pc.png" alt="">
                </div>
              </div>
            </div>
          </div><!-- /mosya_item -->

        </div><!-- box_items -->
        

CSS

.item_img_case img{
    width: 100%;
}

.item_img_case:hover{
    cursor:zoom-in;   
}

/*クリックした時に表示される部分のCSS*/
.zoom_container{
　　/*オーバーレイのCSS*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background: rgba(0,0,0,0.6);
    overflow: scroll;
}

.zoom_container:hover{
    cursor:zoom-out;
}

.zoom_img_case img{
    width: 100%;
}

.close{
    display: none;
}

/*itemの位置調整のCSS*/
.zoom_img_case{
    width: 55%;
    margin:0 auto;
    cursor: auto;
}

.item{
    background-color: rgb(127, 158, 78);
    padding:25px;
    width: 25%;
    margin:0 auto;
}

jQuery

jQuery(function($){
    $('.item_img_case').click(function(){
      $('.zoom_container').removeClass('close');
    });


    //拡大画像以外クリックで画像を閉じる
    $('.zoom_container').click(function(e){
        if(! $(e.target).closest('.close_resist').length ){
          $('.zoom_container').addClass('close');
        }
      });

    });//jQueryの終わり

コードの解説

サムネ画像をクリックした時の動作

概要としましては、あらかじめオーバーレイで作った画面をdisplay:none;で消し、サムネ画像をクリックした時jQueryでdisplay:none;のついたクラスを外すことでオーバーレイが表示される仕組みです。

今回のcodeで言えば.zoom_containerがついた<div>がオーバレイ部分です。
.closeにdisplay:none;をcssで指定し、.zoom_containerの<div>にcloseをつけることでオーバーレイ（.zoom_container)を非表示にしています。
jQueryのクリックイベントでitem_img_caseをクリックした時の動作を指定します。
removeClass()で任意のclass名を消す指示を出すことで、.zoom_containerが表示されます。
これでサムネ画像をクリックした時、詳細画像を出す動作が実現できます。
今のままでは一度詳細画像出すと元の状態に戻すことができないので、次は詳細画像を消す部分のcodeを説明していきます。

詳細画像を消すためのcode

詳細画像を消すためのcodeについて解説していきます。
概要としましては、詳細画像以外の場所をクリックすると.zoom_containerに.closeが付与されるようにして.zoom_containerの<div>を非表示にする仕組みです。

//拡大画像以外クリックで画像を閉じる
    $('.zoom_container').click(function(e){
        if(! $(e.target).closest('.close_resist').length ){
          $('.zoom_container').addClass('close');
        }
      });

function(e)について

function()に仮引数を与えることで（eじゃなくてもいい）jQueryにあらかじめ設定してある値を取得できます。
あらかじめ設定してある様々な値の詳細はjQueryでconsole.log(仮引数);を記述した状態で検証画面を開きconsoleを見れば確認できます。

※どんな値があるのか興味がある方は、consoleで値を確認しどんな意味を持っているのか調べてみてください。

if( ! $(e.target).closest(‘.close_resitst’).length )について

①$(e.target)

$(仮引数.target)とすることでjQueryあらかじめ設定してあるデータの中のtargetの項目のデータの値を取得しています。
targetの項目のデータは イベント発生源である要素を取得します 。
クリックイベントの中に記述することでクリックされた要素を取得することがきます。
簡単に言うとユーザーがクリックした場所がどこであるかを判断するためのcodeです。

②closest()

closest()メソッドを使用して親要素を検索しています。
$(検索開始点としたい要素).closest(検索したいclass名)とすることで、「検索開始点としたい要素」から遡って検索していき「検索したいclass名」を発見すると検索をやめます。
今回で言えば$(e.target).closest(‘.close_resiset’)なので「ユーザーによってクリックされた要素」から遡って検索していき「.close_resist」を発見するまで検索を続けます。

③length

lengthは本来要素の数を数えるプロパティですが、要素が存在するか否かの判別に使うこともできます。 （lengthで得られた値が0だと要素がない。1以上だと要素があると判断できるため）
closestは「検索したいclass名」を発見すると検索をやめるのでclosest.length
のようにすると、要素がある場合は必ず1,要素がなければ0を返します。

④if(!)

!はtrueとfalseを反転させます。
if( ! 条件式 )とすることで条件式が正しいとfalseになり、間違っているとtrueとなります。
またif(0)はfalse、if(1)はtrueとなる決まりがあります。

最後に①～④を踏まえたうえで流れを確認していきましょう。

          <div class="box_items">

    <div class="item">
      <div class="item_inner">
        <div class="item_img_case">
          <!-- ----- 表紙画像 ----- -->
          <img src="./img/elena/elena_pc表紙.png" alt="">
        </div><!-- /item_img_case -->
        <div class="item_p_case">
          <p>画像をクリックしてください</p>
          <p>元サイト様：Elena様サイト（制作：はとむぎ&緑茶）</p>
        </div><!-- /item_p_case -->
        
        <!-- 画像拡大表示-->
        <div class="zoom_container close">
          <div class="zoom_img_case close_resist">
            <!-- ----- クリック時表示(画像) ----- -->
            <img src="./img/elena/elena_pc.png" alt="">
          </div>
        </div>
      </div>
    </div><!-- /mosya_item -->

  </div><!-- box_items -->
        

//拡大画像以外クリックで画像を閉じる
    $('.zoom_container').click(function(e){
        if(! $(e.target).closest('.close_resist').length ){
          $('.zoom_container').addClass('close');
        }
      });

1. オーバーレイ部分（.zoom_container）をクリックすると処理を行う（クリックイベント）
2. クリックされた場所の情報を$(e.target)で取得。
3. $(e.target)の情報＝クリックされた要素
   クリックされた要素から遡って親要素に.close_resistがあった場合は「1」、なかった場合は「0」を返す。
4. if構文において「1」はtrue、「0」はfalse
5. !によって条件式が反転するので.close_resistが存在する場合はfalse、存在しない場合はtrueが返ってくる。
6. trueの場合
   オーバーレイ部分（.zoom_container）に.closeが追加される。
   .closeはcssでdisplay:none;が設定してあるので詳細画像が消える
7. falseの場合
   .closeが追加されないためオーバーレイが消えない。

詳細画像(.zoom_img_case)に.close_resistをつけることで詳細画像をクリックしたときfalseになるようにする。
こうすると、詳細画像をクリックしても詳細画像は消えないが、詳細画像以外をクリックするとtrueとなるので詳細画像が消えるようになり、デモのような動きが実現できます。

おわりに

画像（サムネ画像）をクリックすると画像が切り替わり詳細がみれるjQueryを紹介しました。
基本的にclassのつけ外しができるようになれば色々な応用ができるので便利です。
これからもいろいろなcodeを紹介していきたいと思います。
少しでも誰かの役に立てたらと思います。

それでは今回はこのあたりで(^.^)/