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

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

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 } ?>
 

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
  • 질문이 없습니다.
전체 0
© SIRSOFT
현재 페이지 제일 처음으로