일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- javascript
- #image
- php
- CGIMALL
- #cgimall
- #happycgi
- jquery
- #쇼핑몰
- #동영상
- happycgi
- 해피CGI
- 게시판
- #웹솔루션
- 쇼핑몰
- #솔루션
- #업종별
- #jQuery
- #뉴스
- 홈페이지제작
- 사이트제작
- 웹솔루션
- CSS
- 솔루션
- #홈페이지
- #해피CGI
- #CSS
- 해피씨지아이
- #이미지
- 홈페이지
- #홈페이지제작
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피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>
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall] Flexible Content Expanding and Collapsing Plugin - jQuery Collapse (0) | 2020.03.18 |
---|---|
[해피CGI][cgimall] 부트스트랩을 이용한 4단계 드랍메뉴 (0) | 2020.03.05 |
[해피CGI][cgimall] Horizontal Bar Chart Plugin - jQuery Devstratum JQP Graph (0) | 2020.02.28 |
[해피CGI][cgimall] 텍스트 입력 및 삭제 애니메이션 - animateTyping.js (0) | 2020.02.26 |
[해피CGI][cgimall] 터치식 360도 제품보기 Jquery 플러그인 - 360 ImageRotate (0) | 2020.02.25 |
Comments