簡単なCSSとJavascriptでクリックで画像拡大(同一ページにある複数の画像対応)

2023年2月19日

簡単なCSSとJavascriptのコードを記述するだけで画像をクリックして拡大縮小させる方法は、ネットで検索すると幾つか紹介されていますが、1ぺージに1画像の場合の方法ばかりです。
2つ以上の画像になると上手く動作しません。

* 画像をクリックすると拡大し、再度クリックすると元の大きさに戻ります。

拡大したい画像が上記のように同一ページに複数ある場合は、ちょっとした工夫が必要になります。

スタイルシートは次のように記述しました。


/* CSS */

.zoom {
transition: transform 0.3s;
}

.zoom.in {
transform-origin: center;
transform: scale(2, 2);
}

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

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

transition: transform 秒数・・・指定した秒数をかけて滑らかに画像が拡大します。
.zoom.in ・・・このようにクラスセレクターを詰めて書くのがポイントです。class="zoom in"で動作させるための指定です。
transform-origin: center ・・・拡大時の原点を中心点に指定します。
transform: scale(水平方向への倍率, 垂直方向への倍率) ・・・縦横の拡大率を設定します。

HTMLは次のように記述しました(同一ページ内の任意の場所に複数記述できます)。


/* HTML */
        
＜img class="zoom" src="画像のパス" />

Javascriptは次のように記述しました。


/* Javascript */
    
const zoom = document.querySelectorAll(".zoom");

zoom.forEach(function (value) {
value.addEventListener("click", () => {
value.classList.toggle("in");
});
});

querySelectorAll・・・複数の要素を一括取得します。class="zoom"で指定されている全ての画像となります。
forEach・・・取得した要素を個々に取り出し処理します。
addEventListener("click")・・・クリック時の動作を指定します。
classList.toggle("in")・・・ここもポイントです。クラス名"in"が無ければ生成、あれば削除します。

画像をクリックすると拡大します。

単純に画像を拡大縮小させるだけのコードです。
拡大したときに画面からはみ出てしまったり、１つの画像が拡大中に別の画像も拡大できたりします。
このままでは不自然なので、細かい部分を修正して使いやすくすると面白いと思います。