用途
新着
履歴
分類

jQuery 画像をサイズ変更してモーダル

jQuery 画像をサイズ変更してモーダル
小さな画像をクリックしたときに、その画像を大きくしてモーダル表示にするサンプルです。

一昔前は画像は必ずサムネイルを作って表示速度のため容量を削っていました。

でも今では数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;
}
公開 2020-07-04 14:14:06
更新 2020-07-04 14:53:34
このページの二次元コード
jQuery 画像をサイズ変更してモーダル

人気のサンプル

search -  category -  about
© 2024 kipure
Top