カテゴリー
CSS HTML jQuery Webサイト作成 WordPress

画像クリックで拡大画像をモーダル表示する

今回は画像をクリックしたら拡大画像がモーダル表示されるようにしてみます。

モーダル表示とは、何らかのアクション(例えば画像のクリック)によって別ウィンドウをページの上に表示することです。

一般的に別ウィンドウの周囲には元のページが透過表示されています。

別ウィンドウをクローズするまで次の操作を行えません。

画像を別タブで拡大表示すると、閲覧後元のページに戻って来てくれない可能性がありますが、モーダル表示だとウィンドウを閉じると元のページに戻ります。

実現方法をネットで調べると、ページ内に画像が1枚ある場合の対応方法が見つかったので、それを応用して3列カラムに配置された画像のモーダル表示にトライします。

先に最終形を示しておきます。

下記の3枚の画像をクリックするとそれぞれの拡大画像がモーダル表示されます。

このページに戻るには、モーダルウィンドウのクローズボタンか周囲の本ページが透過表示されている部分をクリックしてください。

画像1
画像1
画像1
Close
画像2
画像2
画像2
Close
画像3
画像3
画像3
close

では、実現方法を下記の順番で説明します。

目次 [閉じる]
  1. WordPress上での作業
  2. jQueryコード作成
  3. CSSの設定

1. WordPress上での作業

3列カラムの各列に画像を配置し、各画像の前後に下記のようにカスタムHTMLブロックやモーダル表示用の画像、クローズボタンを配置して行きます。

  1. 画像の前にidが”mkyModalImgN”のdivタグを配置(開始タグのみ)。Nは画像の番号を示します(1～3)。
  2. 画像に”高度な設定”でclass “mkyJsModalOpen”を追加。
  3. 画像の後ろにclassが”mkyModal mkyJsModal”のdivタグを配置(開始タグのみ)。”mky～”はCSS設定で、”mkyJs～”はjQuery処理内で使うことを想定しています。以下同様です。
  4. 3の後ろにclassが”mkyModalBG mkyJsModalClose”のdivタグを配置。モーダルのバックグラウンドで、ここがクリックされるとモーダル表示を閉じます。ここは終了タグを含みます。
  5. 4の後ろにclassが”mkyModalContent”のdivタグを配置(開始タグのみ)。モーダル表示するコンテンツを配置するためのdivタグです。
  6. 5の後ろに元の画像と同じ画像を配置。モーダル表示される画像です。
  7. 6の後ろにモーダル表示を閉じるためのボタンを配置。高度な設定でclass “mkyJsModalClose”を追加します。文字色、背景はデフォルトのまま、角丸半径はとりあえず30を設定しました。
  8. 7の後ろに1、3、５で配置したdivタグの終了タグを配置。

各列の処理をブロックエディタGutenbergのグループ化でまとめることも考えたのですが、複数の段落をグループ化した際、幅の調整が面倒だったので、今回はカスタムHTMLでdivタグを使ってグループ化しました。

2. jQueryコード作成

次はjQueryコードの作成です。

「スクロール時にヘッダーを固定する」で作成したmkyScript.js内に下記のコードを追加します。

//
// 画像をモーダル表示する
//
jQuery(function(){
    jQuery('.mkyJsModalOpen').on('click',function(){
    	if (window.matchMedia('(min-width: 740px)').matches) {
            jQuery(this).parent().children('.mkyJsModal').fadeIn();
            return false;
        }
    });
    jQuery('.mkyJsModalClose').on('click',function(){
        jQuery(this).parents('.mkyJsModal').fadeOut();
        return false;
    });
});

最終的なコードは上記になったのですが、実は当初の目論見通りにはなっていません。

当初はfadeIn()、fadeOut()を呼び出す対象オブジェクトをid “mkyModalImgN”とclass “mkyJsModal”を使って指定しようとしたのですが、2つのセレクタを使ってオブジェクトを指定する方法がわかりませんでした。

jQuery()の中でCSSライクに’#mkyModalImgN .mkyJsModal’で指定しようとしたのですが、このような指定はできないようです。

また、mkyModalImgNは取得時に変数に代入されるので更にややこしい…

色々調べた結果、parent()とchildren()を使ってオブジェクトを指定できることが分かりました。

モーダル表示を閉じる際は、クローズボタンかバックグラウンドがクリックされますが、そちらはparents()を使ってオブジェクトを指定できます。

なお、スマートフォンの場合は、モーダル表示しても拡大表示されるわけではないので、メディアクエリーでウィンドウ幅が740以上の場合にモーダル表示するようにしました。

カラム内の画像にはメディアファイルへのリンクを設定しており、スマートフォンの場合新しいタブで画像が表示されます。

PCの場合は、jQueryコード中の”return false”により別タブでの表示がキャンセルされます。

3. CSSの設定

モーダル表示用のCSS設定は下記のようになります。

/* 画像をモーダル表示 */
.mkyModal {
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.mkyModalBG {
    background: rgba(220,20,60,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
}

.mkyModalContent {
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
}

.mkyModalContent img {
    padding: auto;
    width: 100%;
    max-width: 1500px;
}

.mkyModalContent .wp-block-button {
    position: absolute;
    top: 20px;
    right: 20px;
}

class mkyModalに対しては、

  • 画像クリック前の非表示設定
  • 表示サイズと位置の設定(表示エリア全体に表示)
  • 通常コンテンツの上層への表示設定

を行っています。

class mkyModalBGに対しては、

  • 背景色の設定
  • 背景サイズの設定(表示エリアサイズと同じ)

等を行っています。

class mkyModalContentに対しては、

  • 表示位置の設定(縦横中央表示)
  • 表示サイズの設定(幅が表示エリアの90%)

等を行っています。

モーダル表示される画像(“.mkyModalContent img”)に対しては、幅がmkyModalContentの幅と同じ(ただし最大で1500px)になるよう設定しています。

クローズボタン(“.mkyModalContent .wp-block-button”)に対しては、表示位置がmkyModalContent表示エリアの右上になるよう設定しています。

以上、画像がクリックされると拡大画像をモーダル表示する方法の備忘録でした。

結局id “mkyModalImgN”は使いませんでした^_^;

最後までお読みいただきありがとうございました。