つぶやき
-ブログ-

javascriptで画像をズームさせる方法

2023年3月6日

画像が重要なサイトの場合、画像をズームにして見たいときがあります。javascriptを使えば下記のように画像をクリックもしくはマウスカーソルを載せると、画像をズームにして表示させることが可能です。ということで今回はjavascriptで画像をズームにして表示させる方法を解説します。

画像をズームさせるためのコード

javascriptで画像をズームさせるためのコードは次のとおりです。

▢HTML

<div class="overlay">
</div>
<button type="button" class="close_btn">
   <span class="btn-line"></span>
</button>
<ul class="img_content">
 <li><div><img src="img/1.jpg" width="320px" height="200px" class="thumbnail_js" data-image="img/1.jpg"></div>
 </li>
 <li>
　<div><img src="img/2.jpg" width="320px" height="200px" class="thumbnail_js" data-image="img/2.jpg"></div>
 </li>
 <li>
 <div><img src="img/3.jpg" width="320px" height="200px" class="thumbnail_js" data-image="img/3.jpg"></div>
 </li>
</ul>
<div class="big_img"><img src="" width="800px" height="533px" class="zoom_img"></div>

▢CSS

.overlay {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #c5c5c5;
  opacity: 0;
  visibility: hidden;
}

.overlay_active {
  opacity: 0.9;
  visibility: visible;
}

.close_btn {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 99;
  width: 42px;
  height: 42px;
  border-color: #000000;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.close_btn .btn-line {
  display: block;
  position: relative;
  width: 100%;
  height: 5px;
  margin: 0 auto;
  background-color: #000000;
  background-color: transparent;
}

.close_btn .btn-line::before {
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.close_btn .btn-line::after {
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.close_btn_active {
  opacity: 1;
  visibility: visible;
}

.img_content {
  width: 1000px;
  margin: 0 auto;
  padding-top: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.img_content li {
  cursor: pointer;
}

.big_img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: 800px;
  height: 533px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.big_img_active {
  opacity: 1;
  visibility: visible;
}

▢javascript

   <script>
    const zoomImg = document.querySelector('.zoom_img')
    const thumbs = document.querySelectorAll('.thumbnail_js')
    const bigImg = document.querySelector('.big_img')
    const overLay = document.querySelector('.overlay')
    const closeBtn = document.querySelector('.close_btn')
    const body = document.body

    for (let i = 0; i < thumbs.length; i++) {
        thumbs[i].addEventListener("click", function () {
            zoomImg.src = this.dataset.image;
            bigImg.classList.add("big_img_active");
            overLay.classList.add("overlay_active");
            closeBtn.classList.add("close_btn_active");
            body.classList.add("IsScrollAllowed");
        });
    }
    closeBtn.addEventListener("click", function () {
        bigImg.classList.remove("big_img_active");
        overLay.classList.remove("overlay_active");
        closeBtn.classList.remove("close_btn_active");
        body.classList.remove("IsScrollAllowed");
    });


</script>

では上記のコードについて下記で詳しく解説します。

小さい画像とズーム用の大きい画像を配置する

<ul class="img_content">
　<li>
　<div><img src="img/1.jpg" width="320px" height="200px" class="thumbnail_js" data-image="img/1.jpg"></div>
　</li>
　<li>
　<div><img src="img/2.jpg" width="320px" height="200px" class="thumbnail_js" data-image="img/2.jpg"></div>
　</li>
　<li>
　<div><img src="img/3.jpg" width="320px" height="200px" class="thumbnail_js" data-image="img/3.jpg"></div>
　</li>
</ul>
　<div class="big_img"><img src="img/1.jpg" width="800px" height="533px" class="zoom_img"></div>

今回は小さい画像をクリックすると、画像がズームされて表示する設計なので、小さい画像とズーム用の大きい画像を配置します。

そして画像ごとに「data-image=”img/1.jpg”」というデータ属性を付与しています。これは後に詳しく説明しますが、画像ソースをデータ属性で指定しておくことで、クリックした画像ソースの画像をズームして表示させることができます。

オーバーレイを作る

オーバーレイとは下記の画像の灰色の部分です。画像をズームさせて表示したときに、画像以外の範囲をぼかすことで、より画像を際立たせて表示できます。

<div class="overlay">
</div>

.overlay {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #c5c5c5;
  opacity: 0;
  visibility: hidden;
}

.overlay_active {
  opacity: 0.9;
  visibility: visible;
}

オーバーレイはコンテンツの全体を覆い隠すように表示させたいので、画面いっぱいになるように「width: 100vw;　height: 100vh;」を使っています。

クリックする前にはオーバーレイは表示させないので、「opacity: 0;　visibility: hidden;」で非表示にしています。非表示に設定したので、表示させるためのクラス（overlay_active）も作成します。

.IsScrollAllowed {
    overflow: hidden
  }

こちらはオーバーレイを表示させたときに、スクロールを防止するためのクラスです。bodyに付与すればページ全体のスクロールを防げます。

閉じるボタンを作成する

オーバーレイを表示させたら、非表示にするためのボタンも必要になります。

<button type="button" class="close_btn">
  <span class="btn-line"></span>
 </button>

.close_btn {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 99;
  width: 42px;
  height: 42px;
  border-color: #000000;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.close_btn .btn-line {
  display: block;
  position: relative;
  width: 100%;
  height: 5px;
  margin: 0 auto;
  background-color: #000000;
  background-color: transparent;
}

ボタンもページを開いた状態では表示されない状態にしたいので非表示にしましょう。「opacity: 0;
visibility: hidden;」で非表示にさせていますが、「display：none」で非表示にしないのはアニメーションを適用させたいからです。「display：none」にすると、「transition」のアニメーションが効きません。

.close_btn .btn-line::before {
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  transform: rotate(45deg);
}

.close_btn .btn-line::after {
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  transform: rotate(-45deg);
}

×ボタンの閉じるボタンは疑似クラス（before、after）とtransformを使って、作成しています。

.close_btn_active {
  opacity: 1;
  visibility: visible;
}

非表示にしたので、ボタンを表示させるためのクラスも作成します。

定数を作成する

const zoomImg = document.querySelector('.zoom_img')
const thumbs = document.querySelectorAll('.thumbnail_js')
const bigImg = document.querySelector('.big_img')
const overLay = document.querySelector('.overlay')
const closeBtn = document.querySelector('.close_btn')
const body = document.body

では次はjavascriptの解説に入ります。まずはjavascriptで動かせたいHTML要素の値を定数に格納します。document.querySelectorAllは指定した要素をすべて取得するメソッドです。これにより小さい画像をすべて取得しています。

for文で反復処理を行う

for (let i = 0; i < thumbs.length; i++) {
}

今回は一枚目の画像をクリックしたら一枚目の画像をズームさせて表示する、二枚目の画像をクリックしたら二枚目の画像をズームさせて表示するといった処理を行います。こういった反復処理は、for文の繰り返し処理で行えます。

クリックイベントを作成する

   thumbs[i].addEventListener("click", function () {
            zoomImg.src = this.dataset.image;
            
        });

小さい画像を格納した変数「thumbs」に対してクリックイベントを作成します。ループで作った変数である「i」を[]（配列）で指定することで、「一枚目をクリックしたら一枚目をズームにして表示する」、「二枚目をクリックしたら二枚目をズームにして表示する」といった処理が可能になります。

「zoomImg.src = this.dataset.image;」の「 this.dataset.image;」は、さきほどHTMLに付与したデータ属性の値である「data-image=”img/1.jpg”」「data-image=”img/2.jpg”」「data-image=”img/3.jpg”」を指定しています。「dataset.image」と「data-image」が関連づけられています。

さらにthisでクリックした1枚目、2枚目、3枚目の画像の情報を取得できます。これによりズーム用の画像のソースが、クリックした画像のソースに切り替わります。

bigImg.classList.add("big_img_active");
overLay.classList.add("overlay_active");
closeBtn.classList.add("close_btn_active");
body.classList.add("IsScrollAllowed");

クリックしたら、「ズームした画像を表示させる、オーバーレイを表示させる、ボタンを表示させる、スクロールを防止する」といった処理をするための記述も必要です。これはさきほど作成した表示するためのクラス、スクロールを防止するためのクラスを付与すればよいですね。

 closeBtn.addEventListener("click", function () {
 bigImg.classList.remove("big_img_active");
 overLay.classList.remove("overlay_active");
 closeBtn.classList.remove("close_btn_active");
 body.classList.remove("IsScrollAllowed");
    });

オーバーレイを表示したら、非表示にする方法も実装する必要があります。非表示にする方法は閉じるボタンのクリックイベントを作成しましょう。さきほど追加したクラスをremoveで外すことで、元の画面に戻せます。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。


前の記事へ
次の記事へ
一覧へ戻る
最新記事
【WordPress】最初の記事に前の記事へのリンク、最後の記事に次の記事へのリンクを非表示にする方法
javascriptでモーダルウィンドウを作成する方法
【WordPress】次の記事、前の記事を設置する際にリンクだけ取得する方法
WordPressの投稿記事のタイトルや抜粋の文字数を制限する方法を解説
javascriptでフィルタリングを作成する方法
制作に関する
ご相談はこちら