테스트 사이트 - 개발 중인 베타 버전입니다

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

따라하기 9년 전 조회 5,491

jquery zoom 이라는 겁니다.

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

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

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

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

 

</p><p><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);
 }</p><p> .zoom img {
  display: block;
 }</p><p> .zoom img::selection { background-color: transparent; }</p><p> #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></p><p>

 

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

 

</p><p><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; 
   ?> </p><p> </p><p>
 
   <?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>  </p><p> 
   <div class='zoom' id='ex2'>
       <img src="<?=G5_URL?>/data/item/<?=$it['it_img2']?>" width="540" height="670" />
   </div> 
            
            
        <?php } ?>
        <?php } ?></p><p>
 

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인