Image Zoom

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

詳しい導入事例は導入方法を参照してください。

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

使い方

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

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

拡大前）hoge.jpg

デフォルト）hoge_zoom.jpg

data-suffix="xl"）hoge_xl.jpg

data-suffix=""）hoge.jpg

HTML
CSS
Script

.mod_imgZoom {
  position: relative;
  transform-origin: 0 0;
  transition: .2s;
}
.mod_imgZoom-wrap {
  width: fit-content;
  display: block;
  cursor: zoom-in;
  position: relative;
}
.mod_imgZoom-wrap::after {
  content: '\e8ff';
  padding: 4px;
  border-radius: var(--radius-circle);
  background: var(--overlay);
  color: var(--bg-paper);
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  opacity: 0;
  transition: .2s;
}
.mod_imgZoom-wrap:not(.zooming):hover:after {opacity: 1;}
.zooming .mod_imgZoom {
  cursor: zoom-out;
  position: fixed;
  z-index: 1001;
}

//初期設定
$('.mod_imgZoom').each(function(){
  $(this).wrap('<span class="mod_imgZoom-wrap ico-aft"></span>');
});

$bd.on('click','.mod_imgZoom-wrap',function(){
  let $img = $('.mod_imgZoom',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('<div class="overlay zoom"></div>');
  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);
}