JavaScript lightbox library for presenting various types of media.
Responsive, touch-enabled and customizable.
<!-- 1. Add latest jQuery and fancybox files -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<!-- 2. Create links -->
<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>
<!-- 3. Have fun! -->
For guide on using the fancybox, visit our learning section.
Looks great on every device.
Swipe to navigate, spread/pinch to zoom in/out supported on touch devices.
It is possible to open a modal while another is still visible.
Just two files. Can be implemented without writing a single line of JavaScript.
Supports most popular sites as YouTube, Vimeo and Google maps out of the box.
Hardware accelerated animations for better performance.
Set HTML content dimensions using any CSS unit and the browser will do the rest.
SVG icons can be easily customized using CSS.
By default, fancybox fully preloads an image before displaying it. You can choose to display the image right away. It will render and show the full size image while the data is being received.
YouTube & Vimeo videos can be used with fancybox by just providing the page URL. Integrated HTML5 video player will play MP4 videos using a browser's native video capabilities.
Videos are responsive and will always fit within the window while maintaining correct aspect ratio.
Display HTML elements, web pages, video, google maps and also load content via AJAX with ease. You can mix images, videos and any HTML content in each gallery.
Hidden HTML element
Custom design and open/close animation
Modal window
The goal of fancybox is to help you stand out and save you time. With the help of a bit of CSS and JS, you can easily create something awesome. Different animations, UI, anything is possible! 😉
Below is just a small assortment of creative demos.
Change visuals and even the layout just using CSS. Change position of caption and use it for displaying social icons or advertisment.
Completely change the look and feel of the modal window. Custom layout, design and dotted navigation.
There should be a price tag and a brief description of the product.
Also, a form where customers could, for example, choose product size, color and quantity.
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 volutpat. Integer quis erat vehicula, molestie nulla vel, sagittis odio. Quisque hendrerit eleifend magna, sit amet dictum odio condimentum a. Proin et ipsum venenatis, elementum sem convallis, pellentesque elit. Mauris congue velit porttitor dui condimentum porttitor. Aenean pretium suscipit ante in imperdiet.
Nam vitae suscipit metus, eget volutpat quam. Ut et sem nunc. Vivamus erat leo, auctor in neque non, malesuada consectetur neque. Ut ac purus est. Quisque molestie pharetra sem sit amet ornare. Nam eu felis in nisl lacinia iaculis. Pellentesque ut lobortis lacus. Etiam ut eros non dui ultrices imperdiet.
Ut pulvinar sem gravida porta ullamcorper. Pellentesque laoreet tellus eu egestas tempor. Ut nec lobortis nulla. Aenean tincidunt eu eros eget tincidunt. Vivamus ac lacinia mi, ut varius justo. Praesent eu ante vel velit iaculis aliquam sit amet vestibulum purus. Fusce molestie enim eros. Pellentesque justo sem, pharetra vel ligula non, euismod elementum tortor. Morbi dui ligula, rhoncus nec dignissim a, malesuada feugiat massa.
Cras non lobortis mauris. Maecenas id placerat est, ac lobortis nisi. Aenean dapibus arcu commodo magna tristique, et facilisis diam aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a vestibulum erat, nec ornare libero. Proin aliquam, neque vel mattis euismod, tortor lacus tempus turpis, ac vulputate augue nisl eget sem. Integer in porttitor mauris.
fancybox is licensed under the
GPLv3 license for all open source applications.
A commercial license is required for all commercial applications (including sites, themes and
apps you plan to sell).
Safe and Secure payments are processed by FastSpring.
Not yet, but it is planned to be released this fall. It is going to be awesome.
No. All licenses purchased before February 24st 2017 have been automatically upgraded to their current equivalent and no action is required by the license holder.
Single Commercial license allows you to use fancybox in one project (e.g, website, mobile app, etc). Cannot be used in salable software.
Extended Commercial license covers all projects made by you or one salable software (for example, one wordpress theme).
By purchasing ONE "Extended Commercial license", you are allowed to include fancybox in ONE product (for example: premium
theme, plugin or template) for sale. Customers and users of your product do not
need to purchase their own license — as long as they are not developing their
own commercial products with fancybox.
Warning
You are not allowed to create a product directly competing with fancybox. For example, you are not allowed to create a premium
plugin whose main purpose is to bring modal/lightbox functionality to website.
All licenses are perpetual for the licensed version of the software: you can use them for as long as you like.