상품 상세사진 마우스줌 보기 소스를 구했는데..

상품 상세사진 마우스줌 보기 소스를 구했는데..

QA

상품 상세사진 마우스줌 보기 소스를 구했는데..

본문

jquery zoom 이라는 겁니다.

작은 썸네일 사진에 마우스를 가져다 댈때 마다

왼쪽의 큰 이미지가 바뀌고, 그 바뀐 이미지 마다 줌 이 되어야 하는데..

도무지 감이 오질 않네요..

한장만 되게 하거나, 여러장이 다 보이게 하면 되긴 합니다만..... -_-;;

 


<style>
 .zoom {
  display:inline-block;
  position: relative;
 }
 
 /* magnifying glass icon */
 .zoom:after {
  content:'';
  display:block; 
  width:33px; 
  height:33px; 
  position:absolute; 
  top:0;
  right:0;
  background:url(icon.png);
 }
 .zoom img {
  display: block;
 }
 .zoom img::selection { background-color: transparent; }
 #ex1 img:hover { cursor: url(grab.cur), default; }
 #ex1 img:active { cursor: url(grabbed.cur), default; } 
 #ex2 img:hover { cursor: url(grab.cur), default; }
 #ex2 img:active { cursor: url(grabbed.cur), default; } 
</style>

 


<script src='<?php echo G5_URL ?>/js/jquery.zoom.js'></script>
    
 <script>
  $(document).ready(function(){
   $('#ex1').zoom();
  });
  $(document).ready(function(){
   $('#ex2').zoom();
  });   
 </script>

 


<div id="sit_ov_wrap">
    <!-- 상품이미지 미리보기 시작 { -->
    <div id="sit_pvi">
        <div id="sit_pvi_big" style="margin-top:60px !important">
        <?php
        $big_img_count = 0;
        $thumbnails = array();
        for($i=1; $i<=10; $i++) {
            if(!$it['it_img'.$i])
                continue; 
   ?> 
 

 
   <?php
            $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, 85);
                $thumbnails[] = $thumb;
                $big_img_count++;
    ?>
                
                
                
                
   <div class='zoom' id='ex1'>
       <img src="<?=G5_URL?>/data/item/<?=$it['it_img1']?>" width="540" height="670" />
   </div>  
 
   <div class='zoom' id='ex2'>
       <img src="<?=G5_URL?>/data/item/<?=$it['it_img2']?>" width="540" height="670" />
   </div> 
            
            
        <?php } ?>
        <?php } ?>
 

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT