Zoom

単体の画像を拡大表示する機能

CSSに関しては一部CSSライブラリを採用しているので併用してください。

  • DEMO
  • サフィックス指定
  • サフィックス無し






使い方

拡大したい*-img-*に+-.zoomMod-+のクラスを追加するだけで使用できます。

デフォルトでは拡大後の画像は元画像のファイル名に[_zoom]のサフィックスを付けたファイル名にしています。
他のサフィックスを使用する場合は[data-suffix]属性に「_」を抜いたサフィックスの値を入れてください。
画像の置換をせずに元画像をそのまま拡大する場合は空で[data-suffix]属性を付けてください。

拡大前)hoge.jpg

デフォルト)hoge_zoom.jpg

data-suffix="xl")hoge_xl.jpg

data-suffix="")hoge.jpg

  • HTML
  • CSS
  • Script

  
.zoomMod {
    position: relative;
    transform-origin: 0 0;
    transition: .2s;
  }
  .zoomMod-wrap {
    width: fit-content;
    display: block;
    cursor: zoom-in;
    position: relative;
  }
  .zoomMod-wrap::after {
    content: '\e8ff';
    padding: 4px;
    border-radius: var(--radius-circle);
    background: var(--overlay);
    color: #fff;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    opacity: 0;
    transition: .2s;
  }
  .zoomMod-wrap:not(.zooming):hover:after {opacity: 1;}
  .zooming .zoomMod {
    cursor: zoom-out;
    position: fixed;
    z-index: 1001;
  }
//初期設定
  $('.zoomMod').each(function(){
    $(this).wrap('');
  });

  $bd.on('click','.zoomMod-wrap',function(){
    let $img = $('.zoomMod',this);

    //閉じる
    if($('.zooming')[0]){
      zoomClose();
      return false;
    }

    //計算
    let w = $img.width();
    let h = $img.height();
    let ww = $win.width();
    let wh = $win.height();
    let sw = (ww - 80) / w;
    let sh = (wh - 80) / h;
    let scale = sw;
    if(h*sw > wh){scale = sh;}

    let ol = $(this).offset().left;
    let ml = (ww-(w*scale))/2;
    let translateX = (ol/scale)-(ml/scale);

    let ot = $(this).offset().top;
    let mt = (wh-(h*scale))/2;
    let translateY = (ot/scale)-(mt/scale)-($win.scrollTop()/scale);

    //下処理
    $img.width(w).height(h);
    if($img.data('suffix') != ''){
      let suffix = 'zoom';
      if($img.data('suffix') != undefined){
        suffix = $img.data('suffix');
      }
      $img.attr('src',$img.attr('src').replace('.','_'+suffix +'.'));
    }
    $bd.append('
'); noscroll(); $('.overlay').fadeIn(200); $(this).css({ 'width':w, 'height':h }).addClass('zooming'); //拡大 $img.css('transform','scale('+scale+') translate('+-(translateX)+'px, '+-(translateY)+'px)'); }); $bd.on('click','.overlay.zoom',function(){zoomClose();}); function zoomClose(){ $('.overlay').remove(); noscroll(); let $img = $('.zooming').children(); if($img.data('suffix') != ''){ let suffix = 'zoom'; if($img.data('suffix') != undefined){ suffix = $img.data('suffix'); } $img.attr('src',$img.attr('src').replace('_'+suffix +'.','.')) } $img.removeAttr('style').css('z-index','1001'); $('.zooming').removeAttr('style').removeClass('zooming'); setTimeout(function(){ $img.removeAttr('style'); },200); }