Webサイト制作

投稿日:2024年4月3日 更新日:

画像の拡大表示(ポップアップ)

やりたいこと

画像のポップアップがしたい!

タグを設置

html内であればどこでも良いので、ポップアップしたいページに以下のタグを追加する

<div id="modal-container">
    <div><img src=""></div>
</div>

画像にクラスを付与

上のタグとは別に、ポップアップしたい画像にクラスを追加する。
クラス名は任意のものを。

<img src="画像のパス" class="popup">

スクリプトを記載

jQueryを使用します。
以下のコードをページに追加します。

const modal = jQuery('#modal-container');
const img = modal.find('img');
jQuery('img.popup').each(function(index) {
jQuery(this).click(function() {
img.attr('src', jQuery(this).attr('src'));
modal.show();
})
});
modal.click(function() {
$(this).hide();
});

スタイルを記載

スタイルシートに以下コードを追記します。

#modal-container {
display: none;
position: fixed;
background: rgba(0, 0, 0, .6);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
}
#modal-container>div {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
#modal-container>div img {
max-width: calc(100vw - 30px);
max-height: calc(100vh - 30px);
}
img.popup {
cursor: pointer;
}

完成!

- Webサイト制作
-

関連記事

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 amazonのPro ...

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

amazon APIのBrowseNode ID一覧ってどうやって調べるの?

amazon APIのBrowseNodeID BrowseNodeって? アマゾンの商品カテゴリです。 ScratchpadのGetBrowseNodesでIDを取得することができます。 まずは必要 ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...