이번 포스팅에서는 이미지 플러그인중 하나인 Fancybox에 대해 알아보도록 하겠습니다.
Fancybox는 이미지, 텍스트, 동영상 등의 콘텐츠들을 라이트박스 형태로 제공해주는 플러그인입니다.
저 같은 경우는 이미지를 갤러리 형태로 오픈하기 위해서 사용했습니다.
https://fancyapps.com/fancybox/3/
fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script
Combination of jQuery, CSS transitions to spice up the way modal window opens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh eu nibh scelerisque malesuada. Morbi mollis eleifend turpis. Mauris consequat convallis volutpa
fancyapps.com
Fancybox 기본 세팅
1. Fancybox를 사용하기 위해서 jQuery 3.5.1을 로드해줍니다.(Fancybox는 3.x 버전을 선호합니다.)
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
2. Fancybox를 다운로드하고 .css와 .js를 각자의 프로젝트에 로드합니다.(홈페이지에 들어가시면 다운로드할 수 있습니다.)
jquery.fancybox.js 또는 jquery.fancybox.min.js 둘중 하나만 로드해야 합니다. 이때 주의할 점으로는 fancybox 보다 jQuery 3.5.1가 먼저 로드되어야 합니다.
Fancybox의 기본형
기본 세팅이 끝났으면 Fancybox를 사용하는 방법입니다.
a 태그에 data-fancybox 속성으로 같은 값을 입력하게 되면 같은 값을 가진 이미지들로 갤러리가 만들어집니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fancybox 예제</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
</head>
<body>
<a href="img/1.jpg" data-fancybox="gallery"><img src="img/1.jpg" width="350px" height="200px"></a>
<a href="img/2.jfif" data-fancybox="gallery"><img src="img/2.jfif" width="350px" height="200px"></a>
<a href="img/3.jpg" data-fancybox="gallery"><img src="img/3.jpg" width="350px" height="200px"></a>
<a href="img/4.jpg" data-fancybox="gallery"><img src="img/4.jpg" width="350px" height="200px"></a>
</body>
</html>
자바스크립트로 Fancybox 열어보기
자바스크립트를 통해서도 갤러리를 만들 수 있습니다.
아래는 jQuery를 사용하여 구현하였지만 단순히 자바스크립트로도 구현할 수 있습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fancybox 예제</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
</head>
<body>
<button id="img-btn">이미지 오픈</button>
</body>
<script type="text/javascript">
$("#img-btn").on("click", function(){
$.fancybox.open([
{
src : 'img/1.jpg',
opts : {
caption : 'First caption',
thumb : 'img/1.jpg'
}
},
{
src : 'img/2.jfif',
opts : {
caption : 'Second caption',
thumb : 'img/2.jfif'
}
},
{
src : 'img/3.jpg',
opts : {
caption : 'Third caption',
thumb : 'img/3.jpg'
}
},
{
src : 'img/4.jpg',
opts : {
caption : 'Fourth caption',
thumb : 'img/4.jpg'
}
}
], {
loop : false
});
});
</script>
</html>
여기서 저는 이미지를 동적으로 추가하여 갤러리를 사용하고 싶었습니다.
가령 DB에서 이미지 경로를 받아온 뒤 받아온 수개 또는 수십 개의 이미지를 동적으로 추가하여 갤러리를 구현하는 게 목표였습니다. Fancybox의 이슈들을 뒤져본 결과 저와 같은 생각을 한 사람이 있었고, 답변을 들을 수 있었습니다.
동적으로 이미지를 추가하는 함수는 있지만, 삭제는 할 수 없다고 합니다.
아래는 그 코드의 예시입니다. Fancybox안의 core.css와 core.js를 추가로 로드해야 합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fancybox 예제</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" type="text/css" href="css/core.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/core.js"></script>
</head>
<body>
<button id="img-btn">이미지 오픈</button>
</body>
<script type="text/javascript">
$("#img-btn").on("click", function(){
var img_array = ["img/1.jpg", "img/2.jfif", "img/3.jpg", "img/4.jpg"];
var instance = $.fancybox.open(
{
src: img_array[0],
opts : {
thumb : img_array[0]
}
},
{
loop : false
}
);
for(var i = 1 ; i < img_array.length ; i++){
instance.addContent({
src: img_array[i],
opts : {
thumb : img_array[0]
}
});
}
});
</script>
</html>위의 코드를 설명드리자면 먼저 var instance = &. Fancybox.open()를 통해 Fancybox를 하나 오픈하면서 인스턴스를 가져와야 합니다.
이렇게 하는 이유는 슬라이드를 동적으로 addContent 해줄 때 기존에 슬라이드가 존재해야지 그 뒤에 붙일 수 있기 때문입니다. 그렇기 때문에 이미지의 첫 번째 요소로 Fancybox를 오픈시킨 다음 두 번째 요소부터 반복문을 통해 추가해주었습니다.
하나의 이슈가 있다면 이렇게 추가해준 슬라이드는 이상하게도 썸네일이 만들어지지 않았습니다.
온갖 방법을 다 시도해보았는데 안되더군요...
슬라이드를 동적으로 추가하는 것에 더 관심이 있는 분께서는 아래의 깃허브 이슈를 확인해주시기 바랍니다.
https://github.com/fancyapps/fancybox/issues/1479
dynamically add/remove slides to existing instance · Issue #1479 · fancyapps/fancybox
hi wouldn't it be a nice feature being able to add or remove slides to/from an existing instance of fancybox, something like: var instance = $.fancybox.getInstance(); var opts = { ... }; instan...
github.com
추가적인 옵션들이나 API문서는 공식 홈페이지를 참고해주세요.
https://fancyapps.com/fancybox/3/docs/
fancybox3 · Documentation
Introduction Get started with fancybox, probably the world’s most popular lightbox script. Dependencies jQuery 3+ is preferred, but fancybox works with jQuery 1.9.1+ and jQuery 2+ Compatibility fancybox includes support for touch gestures and even suppor
fancyapps.com
'Programming > Web' 카테고리의 다른 글
| CSS 프로그레스 바(progress bar) (0) | 2021.10.12 |
|---|---|
| <button> 버튼 태그가 작동 안될 때 (0) | 2021.10.10 |
| CSS 테두리만 있는 말풍선 그리기 (0) | 2021.10.10 |
| 모달창 중앙정렬 하기 (0) | 2021.02.18 |
| DOM 노드트리 순회하기 (0) | 2021.01.04 |
댓글