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);
  }