[해피CGI][cgimall] jQuery 를 이용한 image zoom in, zoom out

jQuery 로 만든 Zoom in, Zoom out 플러그인 입니다.

이미지를 클릭하면 라이트 박스 처럼 이미지를 Zoom in 하여 보여집니다.

당연히 다시 클릭하면 이미지는 원상태로 Zoom out 됩니다. 

Mac에서는 ⌘ , Windows에서는 Ctrl 를 누른 상태에서 클릭하면 이미지가 새 탭에서 열립니다.

사용법

1.페이지 상단에 zoom 과 관련된 css 를 호출하세요. 

<link href="css/zoom.css" rel="stylesheet">

2.img 태그에 data-action="zoom" 을 추가하세요. 

<img src="img/blog_post_featured.png" data-action="zoom">

3.하단에 js 를 호출하세요. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="js/zoom.js"></script>