썸네일이미지를 사용하거나, 일반 이미지의 경우 큰이미지 작은이미지를 이용하여
이미지에 마우스 Hover시 이미지부분이 확대 Zoom 형태로 출력되게 하는 Tip입니다.
상품소개 이미지의 경우 많이 사용되어 질 수 있습니다.
[코드]
<style type="text/css">
.zoom-section{clear:both;margin-top:20px;}
.zoom-small-image{border:4px solid #CCC;float:left;margin-bottom:20px;}
.cloud-zoom-lens {border: 4px solid #888;margin:-4px;background-color:#fff;cursor:move;}
.cloud-zoom-title {font-family:Arial, Helvetica, sans-serif;position:absolute !important;background-color:#000;color:#fff;padding:3px;width:100%;text-align:center;font-weight:bold;font-size:10px;top:0px;}
.cloud-zoom-big {border:4px solid #ccc;overflow:hidden;}
.cloud-zoom-loading {color:white;background:#222;padding:3px;border:1px solid #000;}
.zoom-desc{float:left;margin-bottom:20px}
.zoom-notice{font-size:14px; color:#f60;}
</style>
<script type="text/javascript" src="cloud-zoom.1.0.2.min.js"></script>
<div class="zoom-section">
<div class="zoom-small-image">
<a href='img01.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX:10, adjustY:-4"><img src="img01.jpg" width='250' alt='' title="Optional title display" /></a>
</div>
<div class="zoom-desc">
<p class="zoom-notice">상품설명 : 이미지에 마우스를 대면 이미지가 확대되면서 상품의 자세한 부분 까지 확인할수 있습니다.</p>
</div>
</div><!--1 zoom-section end-->
<div class="zoom-section">
<div class="zoom-small-image">
<a href='img02.jpg' class='cloud-zoom' rel="position:'inside',showTitle:false,adjustX:-4,adjustY:-4"><img src="img02.jpg" width='250' title="Your caption here" alt=''/></a>
</div>
<div class="zoom-desc">
<p class="zoom-notice">상품설명 : 이미지에 마우스를 대면 이미지가 확대되면서 상품의 자세한 부분 까지 확인할수 있습니다.</p>
</div>
</div><!--2 zoom-section end-->
이상에서 설명을 하자면 class부분은 되도록이면 손대지 마시고 script cloud-zoom.1.0.2.min.js 을 해당 폴더에 업로드합니다.
위에 보면 두개의 zoom-section부분이 보입니다.
2가지의 다른 zoom기능을 보여줍니다. 설치해 보시고 마음에 드시는 부분은 남기시면 됩니다.
1번은 마우스 Hover시 확대된 이미지가 썸네일 우측에 출력되는 코드며,
2번은 마우스 Hover시 확대된 이미지가 썸네일내에서 출력되는 코드입니다.
img src="img01.jpg" width='250' 이 부분은 출력하고자 하는 이미지를 썸네일에 250px의 작은 이미지로 보이게 하는 부분입니다.
a href='img02.jpg' 이 부분은 마우스 hover시 확대 Zoom 되어 보여지는 원본이미지입니다.
이미지가 썸네일로 출력되는 경우는 아래의 코드처럼 적용하시면 됩니다.
<load target="css/zoom.css" />
<load target="js/cloud-zoom.1.0.2.min.js" />
<div class="zoom-small-image">
<a cond="$wi->thumd_nails== 'Y' && $oDocument->document_srl" href="{$oDocument->getThumbnail($wi->thumbnail_width*3, $wi->thumbnail_height*3,ratio)}" class='cloud-zoom' rel="position:'inside',showTitle:false,adjustX:-1,adjustY:-1">
<img src="{$oDocument->getThumbnail($wi->thumbnail_width, $wi->thumbnail_height, $wi->thumbnail_type)}" alt="" title="Your caption here" />
</a>
</div>
</div>
*3 은 기본 썸네일크기의 3배 크기의 썸네일로 확대해서 출력된다는 뜻입니다.
ratio 부분은 썸네일의 타입을 원본 이미지 전체가 다 보이게 한다는 뜻입니다.