영카드 이미지 미리보기에 돋보기 기능 삽입을 했으면 하는데요

소스는 찾은것 같은데 적용을 못하겠어요 고수분들 도와주세요

window.onload = function () {
 
 var target = $('.target');
 var zoom = target.data('zoom');
 
 $(".wrap")
  .on('mousemove', magnify)
  .prepend("<div class='magnifier'></div>")
  .children('.magnifier').css({
   "background": "url('" + target.attr("src") + "') no-repeat",
   // 이미지를 zoom 배율만큼 확대해 배치한다.
   "background-size": target.width() * zoom + "px " + target.height() * zoom+ "px"
  });
 
 var magnifier = $('.magnifier');
 
 function magnify(e) {
 
  // 마우스 위치에서 .magnify의 위치를 차감해 컨테이너에 대한 마우스 좌표를 얻는다.
  var mouseX = e.pageX - $(this).offset().left;
  var mouseY = e.pageY - $(this).offset().top;
 
  // 컨테이너 밖으로 마우스가 벗어나면 돋보기를 없앤다.
  if (mouseX < $(this).width() && mouseY < $(this).height() && mouseX > 0 && mouseY > 0) {
   magnifier.fadeIn(100);
  } else {
   magnifier.fadeOut(100);
  }
 
  //돋보기가 존재할 때
  if (magnifier.is(":visible")) {
 
   // zoom으로 인해 확대된 이미지에 비례한 mouse 좌표를 얻는다.
   var rx = -(mouseX * zoom - magnifier.width() /2 );
   var ry = -(mouseY * zoom - magnifier.height() /2 );
 
   //돋보기를 마우스 위치에 따라 움직인다.
   //돋보기의 width, height 절반을 마우스 좌표에서 차감해 마우스와 돋보기 위치를 일치시킨다.
   var px = mouseX - magnifier.width() / 2;
   var py = mouseY - magnifier.height() / 2;
 
   //적용
   magnifier.css({
    left: px,
    top: py,
    backgroundPosition: rx + "px " + ry + "px"
   });
  }
 }

};

-------------------------------------------------------

아래에 적용을 해야되는데 어떻케 해야되지요

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_CSS_URL.'/style.css">', 0);
?>
<div id="sit_ov_from">
 <form name="fitem" method="post" action="<?php echo $action_url; ?>" onsubmit="return fitem_submit(this);">
 <input type="hidden" name="it_id[]" value="<?php echo $it_id; ?>">
 <input type="hidden" name="sw_direct">
 <input type="hidden" name="url">
 
 <div id="sit_ov_wrap">
     <!-- 상품이미지 미리보기 시작 { -->
     <div id="sit_pvi">
         <div id="sit_pvi_big">
         <?php
         $big_img_count = 0;
         $thumbnails = array();
         for($i=1; $i<=10; $i++) {
             if(!$it['it_img'.$i])
                 continue;
 
             $img = get_it_thumbnail($it['it_img'.$i], $default['de_mimg_width'], $default['de_mimg_height']);
 
             if($img) {
                 // 썸네일
                 $thumb = get_it_thumbnail($it['it_img'.$i], 70, 70);
                 $thumbnails[] = $thumb;
                 $big_img_count++;
 
                 echo '<a href="'.G5_SHOP_URL.'/largeimage.php?it_id='.$it['it_id'].'&no='.$i.'" target="_blank" class="popup_item_image">'.$img.'</a>';
             }
         }
 
         if($big_img_count == 0) {
             echo '<img src="'.G5_SHOP_URL.'/img/no_image.gif" alt="">';
         }
         ?>
         <a href="<?php echo G5_SHOP_URL; ?>/largeimage.php?it_id=<?php echo $it['it_id']; ?>&no=1" target="_blank" id="popup_item_image" class="popup_item_image"><i class="fa fa-search-plus" aria-hidden="true"></i><span class="sound_only">확대보기</span></a>
         </div>
         <?php
         // 썸네일
         $thumb1 = true;
         $thumb_count = 0;
         $total_count = count($thumbnails);
         if($total_count > 0) {
             echo '<ul id="sit_pvi_thumb">';
             foreach($thumbnails as $val) {
                 $thumb_count++;
                 $sit_pvi_last ='';
                 if ($thumb_count % 5 == 0) $sit_pvi_last = 'class="li_last"';
                     echo '<li '.$sit_pvi_last.'>';
                     echo '<a href="'.G5_SHOP_URL.'/largeimage.php?it_id='.$it['it_id'].'&no='.$thumb_count.'" target="_blank" class="popup_item_image img_thumb">'.$val.'<span class="sound_only"> '.$thumb_count.'번째 이미지 새창</span></a>';
                     echo '</li>';
             }
             echo '</ul>';
         }
         ?>
     </div>
     <!-- } 상품이미지 미리보기 끝 -->