画像をホバーで虫眼鏡拡大表示

画像ホバーで虫眼鏡拡大表示の実装方法。

下記検証サーバーに実装した例。

【BS】
http://s10013272000321.c2.hpms1.jp/%E7%94%BB%E5%83%8F%E3%83%9B%E3%83%90%E3%83%BC%E6%8B%A1%E5%A4%A7%E3%83%86%E3%82%B9%E3%83%88

【EC】
http://s2665515.xaas3.jp/item/a001/

実装手順

main.css

main.cssの最下部に下記を追記

.zoom_imagearea{
  position: relative;
  display:inline-block;
  margin: 1em 1em;
}
.loupe{
  border:2px solid white;
  background-repeat: no-repeat;
  background-color: white;
  width:200px; height:200px; /* 拡大鏡大きさ */
  position:absolute;
  display:none;
  -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
  -webkit-box-shadow:0 0 5px #777;
  box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
  -moz-border-radius:100px; /* 拡大鏡大きさ ÷ 2 */
  -webkit-border-radius:100px; /* 拡大鏡大きさ ÷ 2 */
  border-radius:100px; /* 拡大鏡大きさ ÷ 2 */
}

main.js

main.jsの最下部に下記を追記

BSとECで追記する内容が異なるので、ご注意ください。

【BS】

//画像をホバーで虫眼鏡拡大表示
$(function(){
  const zoom_img = () => {
    if($('img.zoom_img').length){
      //対象画像周辺に必要要素を追加
      $('img.zoom_img').each(function() {
        if($(this).parent().attr('class') != "zoom_imagearea") {
          const imgSrc = $(this).attr('src')
          $(this).wrap('<span class="zoom_imagearea"></span>')
          $(this).after('<span class="loupe" style="background-image:url(' + imgSrc + ')"></span>')
        }
      })
  
    }
  
    if($('.zoom_imagearea').length){
      
      const magnification = 2; //拡大率
    
      $('.zoom_imagearea').mousemove(function(e) {
        //必要情報の取得
        const offset = $(this).offset()
        const left = (e.pageX - offset.left)
        const top = (e.pageY - offset.top)
        const width = $(this).width()
        const height = $(this).height()
        const loupe = $(this).find('.loupe')
    
        // 拡大鏡の初期化
        if(loupe.is(':not(:animated):hidden')) {
          $(this).trigger('mouseenter')
        }
    
        // 範囲外判定
        if(e.pageX < offset.left || e.pageY < offset.top || e.pageX > (offset.left + width) || e.pageY > (offset.top + height)) {
          if(!loupe.is(':animated')) {
            $(this).trigger('mouseleave')
          }
          return false
        }
    
        // 拡大鏡の表示位置を更新
        loupe.css('left', left - loupe.width() / 2)
        loupe.css('top', top - loupe.height() / 2)
    
        // 画像表示位置を更新
        const x = (magnification * left * -1) + (loupe.width() / 2)
        const y = (magnification * top * -1) + (loupe.height() / 2)
        loupe.css('background-position', x + 'px ' + y + 'px')
      }).mouseleave(function() {
        $(this).children('.loupe').stop(true, true).fadeOut('fast') // ホバー外で虫眼鏡を非表示
      }).mouseenter(function() {
        $(this).children('.loupe').css('background-size', ($(this).find("img").width() * magnification) + 'px auto') // 背景サイズを設定
        $(this).children('.loupe').stop(true, true).fadeIn('fast') // ホバーで虫眼鏡を表示
      })
    }
  }

  $(window).on('load resize', function(){
    const winW = $(window).width()
    const devW = 767
    if (winW >= devW) {
      zoom_img()
    }
  })
})

【EC】

//画像をホバーで虫眼鏡拡大表示
$(function(){
  const zoom_img = () => {
    //ROOK商品画像に適用
    if($(".goodsItems_10").length) {
      $('.mainPhoto img').each(function() {
        if($(this).parent().attr('class') != "zoom_imagearea") {
          const imgSrc = $(this).attr('src')
          $(this).wrap('<span class="zoom_imagearea"></span>') // imgタグをspanでラップ
          $(this).after('<span class="loupe" style="background-image:url(' + imgSrc + ')"></span>') // loupeを追加
        }
      })
    }

    if($('img.zoom_img').length){
      //対象画像周辺に必要要素を追加
      $('img.zoom_img').each(function() {
        const imgSrc = $(this).attr('src')
        $(this).wrap('<span class="zoom_imagearea"></span>')
        $(this).after('<span class="loupe" style="background-image:url(' + imgSrc + ')"></span>')
      })
    }

    if($('.zoom_imagearea').length){
      
      const magnification = 2; //拡大率
    
      $('.zoom_imagearea').mousemove(function(e){
        //必要情報の取得
        const offset = $(this).offset()
        const left = (e.pageX - offset.left)
        const top = (e.pageY - offset.top);
        const width = $(this).width()
        const height = $(this).height()
        const loupe = $(this).find('.loupe')
    
        // 拡大鏡の初期化
        if(loupe.is(':not(:animated):hidden')){
          $(this).trigger('mouseenter')
        }
    
        // 範囲外判定
        if(e.pageX < offset.left || e.pageY < offset.top || e.pageX > (offset.left + width) || e.pageY > (offset.top + height)){
          if(!loupe.is(':animated')){
            $(this).trigger('mouseleave')
          }
          return false
        }
    
        // 拡大鏡の表示位置を更新
        loupe.css('left', left - loupe.width() / 2)
        loupe.css('top', top - loupe.height() / 2)
    
        // 画像表示位置を更新
        const x = (magnification * left * -1) + (loupe.width() / 2)
        const y = (magnification * top * -1) + (loupe.height() / 2)
        loupe.css('background-position', x + 'px ' + y + 'px')
      }).mouseleave(function(){
        $(this).children('.loupe').stop(true, true).fadeOut('fast'); // ホバー外で虫眼鏡を非表示
      }).mouseenter(function(){
        $(this).children('.loupe').css('background-size', ($(this).find("img").width() * magnification) + 'px auto') // 背景サイズを設定
        $(this).children('.loupe').stop(true, true).fadeIn('fast') // ホバーで虫眼鏡を表示
      })
    }
  }

  $(window).on('load resize', function(){
    const winW = $(window).width()
    const devW = 767
    if (winW >= devW) {
      zoom_img()
    }
  })
})

※拡大率は変更可能。jQueryコード内のconst magnification = 2; //拡大率の数値を変更することで、拡大率を変えられる。

対象画像にクラス付与

ホバー拡大表示を実装したい対象画像のimgタグのclassにzoom_imgを追加。

例）

<img src="/wp-content/uploads/item_img001.jpg" class="zoom_img" alt="" />

※ROOKに関しては商品詳細ページのメイン商品画像にも適用されますが、CSSとJSを追加するだけで自動で適用されます。