상품 상세사진 마우스줌 보기 소스를 구했는데..
본문
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 } ?>
답변을 작성하시기 전에 로그인 해주세요.