fancybox

ui-component responsive modal

fancybox는 터치 지원, 반응형, 완전히 사용자 지정 가능한 jQuery 라이트박스 스크립트입니다. 이미지, 비디오, HTML 콘텐츠 등을 아름답고 모던한 방식으로 보여줄 수 있습니다.

Latest Ver 3.5.7

Homepage

Github

7,275

빛나는 순간, 마법이 시작된다.

황홀한 이미지 경험으로, 당신의 웹사이트에 새로운 감동을 추가하세요.

fancybox는 웹사이트에 멀티미디어 콘텐츠를 돋보이게 표시하는 라이트박스 기능을 제공합니다.

CDN 다운로드

License: GPL-3.0

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<a data-fancybox="gallery" href="image.jpg">Open Image</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
$(document).ready(function() {
  $('[data-fancybox]').fancybox();
});
</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

⚙️ JavaScript
$(document).ready(function() {
  $('[data-fancybox]').fancybox();
});