一昔前は画像は必ずサムネイルを作って表示速度のため容量を削っていました。
でも今では数MBでもすぐにダウンロードできてしまいます。
そうなってくると元画像を縮小して表示していても、体感は大して変わらないのではないでしょうか。
（当然、今も3Gや古いブラウザもゼロではないですが、むしろ別の理由で対象外にする時代かもしれません。）
以下の画像をクリックしてみてください。
HTMLにはモーダルウィンドウになったときの背景のDivも置いてあります。
<div id="demo_image_modal_bg"></div> <img class="demo_image_modal" src="https://www.kipure.com/img/demo/cat/013.jpg">
そしてJSは以下のようになっています。
//画像がクリックされたときの処理
$(document).on('click', '.demo_image_modal', function() {
$(this).addClass("demo_spot_image");
$("#demo_image_modal_bg").fadeIn();
});
//背景のグレーがクリックされたときの処理
$(document).on('click', '#demo_image_modal_bg,.demo_spot_image', function() {
$(".demo_image_modal").removeClass("demo_spot_image");
$("#demo_image_modal_bg").fadeOut();
});
配置されている画像がクリックされたとき、クラスを追加してスタイルを変更しています。
CSSは以下の通りです。
.demo_image_modal{
width: 200px;
cursor: pointer;
}
.demo_image_modal.demo_spot_image{
z-index: 300;
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
cursor:auto;
width: auto;
max-width: 300px;
}
#demo_image_modal_bg{
position: fixed;
top: 0;
left: 0;
z-index: 299;
opacity: 0.5;
width: 100%;
height: 100%;
background-color: #000;
display: none;
}
