fancybox

ui-component responsive modal

Fancybox is a touch-enabled, responsive, and fully customizable jQuery lightbox script that makes it easy to display images, videos, and HTML content in a beautiful and modern way.

Latest Ver 3.5.7

Homepage

Github

7,275

When it shines, the magic begins.

Add a new dimension of awe to your website with stunning image experiences.

Fancybox provides lightbox functionality for displaying multimedia content in a standout manner on websites.

CDN Download

License: GPL-3.0

Asset Type :

View All Versions

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

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 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();
});