jQuery ver 3 での click や touch 操作による「シンプルな画像拡大」のコード紹介です。

実装サンプル.

要旨.

□ 記述ファイル：HTML・ CSS・JS
□ 画像にaタグは付けない（ aタグ削除コードあり ）
□ 画像の縦横判定は本記事では未紹介
□ 拡大画像ハミだし回避（ 自動調整 ）
□ PCの場合は、縦幅を基準に拡大率を算出
□ スマホ、タブレットの場合は、横幅を基準に拡大率を算出

HTMLコード.

上記HTMLコードは、ラップ容量の大きなブロック要素の外側に配置すると表示崩れなどのトラブルがありません。

2行目「 class=”large_img” 」の中に拡大用画像が複製されます。
3行目「 class=”overlay_modal” 」 は拡大時の背景です。

拡大画像もしくは背景を クリック or タッチ すれば、拡大を閉じる仕様です。必要な場合は、Close ボタンを設置されると良いかと思います。

CSSコード.

.modal {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1999;
  }
  .overlay_modal {
    width: 100%;
    height: 100vh;
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.8);
    }
    .large_img {
      cursor: pointer;
      /* for center layout */
      display: grid;
      place-items: center;
      /* for center layout end */
      max-width: 80%; /* 画像の中央表示と背景余白バランス調整用 */
      height: auto;
      margin: auto;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2000;
      }
      .large_img img {
        max-width: 960px; /* 一応、歯止めサイズ */
}

CSSコード 41行目の「 max-width 」で歯止めとなる最大サイズを設定しています。

hover 時の画像の透過は以下のような感じに。

article.press img {
  cursor: pointer;
  opacity: 1;
  transition: 0.6s ease-in-out;
  }
  article.press img:hover {
    opacity: 0.6;
}

JSコード.

縦型の画像を「 class=” h_img “ 」
横型の画像を「 class=” w_img “ 」
と想定して記述しています。画像の縦横判定は、別記事で掲載予定です。

// img 拡大表示用
jQuery(window).on( 'load', function (){
  jQuery('article.press img').each(function(){
    // img 親要素が aタグ の場合は削除
    let img_a = jQuery(this).parents('a');
    jQuery(img_a).replaceWith(function() {
      jQuery(this).replaceWith(""+jQuery(this).html()+"");
    });
    jQuery('.modal').hide();
    jQuery('.large_img').hide();
 
    // touchend は NG。スマホ等で実行タイミングに違和感あり。
    jQuery(this).on('click',function(){

        // クリックされた画像を複製
        var img_def = jQuery(this).children().clone();

        // 複製した画像を格納
        jQuery('.large_img').append(img_def);
        //モニター用サイズ判定
        var wht = window.innerHeight;
        var wwh = window.innerWidth;
        if(wwh > 834){
          // desktop ( 縦値を基準に算出 ) 
          var toll = jQuery('article.press img.h_long').height() + 30; // +30px 調整
          var scal = wht / toll;
          if(scal < 1.5){ // 1.5よりも小さければその値を実行（ ハミだし回避 ）
            jQuery('.large_img img').css({transform: 'scale('+ scal +')'});
          } else {
            jQuery('.large_img img').css({'transform': 'scale(1.5)'});
          }
        } else if (wwh < 835) {
          // smart phone & tablet ( 横値を基準に算出 )
          var wide = jQuery('article.press img.w_long').width() + 20; // +20px 調整
          var scal_w = wwh / wide;
          if(scal_w < 1.2){ // 1.2よりも小さければその値を実行（ ハミだし回避 ）
            jQuery('.large_img img').css({transform: 'scale('+ scal_w +')'});
          } else {
            jQuery('.large_img img').css({'transform': 'scale(1.2)'});
          }
        }
        //モニター用サイズ判定 end
        jQuery('.modal').fadeIn();
        jQuery('.large_img').fadeIn(1000);
        jQuery('html').css({'overflow':'hidden'}); // 拡大中はスクロール禁止
        return true;
      });
      // 背景か拡大画像をクリックで閉じる。こちらは touchend で違和感なし。
      jQuery('.overlay_modal , .large_img').on('click touchend',function(){
        jQuery('.large_img').fadeOut(300).empty();
        jQuery('.modal').fadeOut(500);
        jQuery('html').css({'overflow':'visible'}); // スクロール禁止解除
        return true;
      });
   });
});

22行目と31行目の「 + 30 」と「 + 20 」は、拡大画像がモニター幅ぴったりになるのを防ぐ目的で、加算しています。

補足事項.

今回は、画像サイズ取得と拡大比率の算出が必要なため jQuery 側で、img に直接 CSS を指定させていますが、実務的には、CSS 側で処理 ( addClassでクラス付与や、removeClassで解除 ) させた方が、読込みが速いので、可能な限り、CSS側での記述をお奨めします。

POINT

• JS側よりCSS側で記述する方が処理速し。SEO施策的にも良し。
• jQuery v3の場合「 jQuery(window).on( ‘load’, function (){} ); 」内で実行してあげると、画像の縦横判定や初回読込みが正常に実行されます。初回読込み時に判定が必要な場合は「 jQuery( function ( ){ } ); 」内で実行しないこと。（ 画像サイズ取得など不安定に ）
• 「 jQuery(window).on( ‘load’, function (){} ); 」は1ファイル1箇所を基本に。多用すると正常に動作しません。

拡大比率 1.5 と 1.2 の設定理由.

一般的なモニターサイズのノートパソコンでWEBサイトを閲覧すると、モニター縦幅は、実質640px程度。今回は、そのことを考慮して、デスクトップやノートPCに配置される縦画像は、最大 height: 640px と想定。640px を1.5倍すると960px。拡大値の基準としては、モニターサイズと画像品質を鑑みて、この程度が最適だとしました。

なお、写真の画角比率は 3:2 と想定しており、height: 640px ならば、width: 430px。ということで、スマホ、タブレット時の横幅の拡大比率は、1.2倍を基準に設定しています。

サイト設計により、お好みで基準となる数値を変更されると良いかと思います。
CSSコード41行目で最大サイズも指定しているので、お忘れなく。

拡大率1.2 ~ 1.5倍の画像が、モニターからハミでる場合は、モニターサイズに合わせて縮小表示されます。（ JSコード23行目と32行目の 変数scal値 により ）

さいごに.

ご読了いただき有難う御座います。
不束なコードがあればご容赦下さい。
「 jQuery ver3 での click や touch 操作による画像の拡大 」でした。
お役に立てば幸いです。

author: Kouzou Saika