[JQUERY] 이미지 클릭시 확대 기능 구현 - fancybox

블로그 게시글을 보면 이미지를 클릭했을 때 이미지가 크게 확대되어 볼 수 있도록 창이 뜹니다.

그와 같은 기능을 구현해보려고 합니다.

 

---

 

1. JQuery fancybox 다운로드

https://fancyapps.com/fancybox/3/

fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script

 

 

2. 스크립트 및 스타일 링크 연결

<link rel="stylesheet" href="/styles/vendor/jquery.fancybox.min.css">
<script src="/scripts/vendor/jquery.fancybox.min.js"></script>

 

- jquery.fancybox.min.css 경로와 jquery.fancybox.min.js 경로를 적어줍니다.

 

 

3. 이미지에 플러그인 적용

<a href="이미지 파일 경로" data-fancybox data-caption="캡션">
	
    <img src="이미지 파일 경로" alt="이미지 설명">
    
</a>

 

- a 태그에 하이퍼링크를 이미지 파일 경로로 지정하고, data-fancybox를 선언합니다.

- 캡션이 필요하면 입력하고, a 태그 안에 이미지를 넣어주면 됩니다.

 

- 이미지를 클릭하는 경우 a 태그가 발동하면서 fancybox 플러그인이 적용되어 이미지가 크게 보이게 됩니다.

 

 

 

이상으로 JQuery fancybox plugin 사용법을 알아보았습니다.

 

---