JavaScript lightbox library for presenting various types of media.
Responsive, touch-enabled and customizable.

Download

Quick start

                    
<!-- 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/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/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.

Features

Mobile optimized

Looks great on every device.
Swipe to navigate, spread/pinch to zoom in/out supported on touch devices.

Multiple instances

It is possible to open a modal while another is still visible.

Quick & Easy Setup

Just two files. Can be implemented without writing a single line of JavaScript.

Automatic content recognition

Supports most popular sites as YouTube, Vimeo and Google maps out of the box.

GPU accelerated

Hardware accelerated animations for better performance.

Responsive

Set HTML content dimensions using any CSS unit and the browser will do the rest.
SVG icons can be easily customized using CSS.

Demos

Images

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.

Full list of options
Rocky mountain under blue and white sky
Photo by Guillaume Briard
Vaihingen an der Enz, Germany
Photo by Oliver Roos
Closeup photo of world globe
Photo by chuttersnap
Blessed are the curious, for they shall have adventures. 🚩
Photo by Andrew Neel
Man holding pair of ski poles in front of trees
Photo by Oziel Gómez
Aerial photo of person using paddleboard
Photo by Ishan @seefromthesky
Car on curve road surrounded by trees
Photo by Grant Porter

Video

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.

Default settings of YouTube video

Vimeo video with custom aspect ratio (2/1)

Direct link to HTML5 video

Custom video dimensions (aspect ratio is automatically calculated)

Display close button on top of the video; custom start time

Hidden HTML5 video element

Various

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

Open demo

Custom design and open/close animation

Open demo

Modal window

Open demo

Auto-resize iframe based on content

Open demo

Display Google map

Open demo

Be creative

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.

Customized layout

Change visuals and even the layout just using CSS. Change position of caption and use it for displaying social icons or advertisment.

Open demo

Confirm dialog

You can create a more modern look for alert and confirm dialogs using fancybox.

Open demo

Quick product view

Completely change the look and feel of the modal window. Custom layout, design and dotted navigation.

Open demo

Morphing modal overlay

Combination of jQuery, CSS transitions to spice up the way modal window opens.

Open demo

Licenses

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).

Single
Commercial license

Limited to 1 project
Community support
Future updates
$29

Buy Now

Extended
Commercial license

Unlimited projects
1 year premium support
Future updates
$119

Buy Now

Safe and Secure payments are processed by FastSpring.

I already have a fancybox 2 license. Do I need to upgrade it?

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.

What is the main difference between Single and Extended license?

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).

Can I use fancybox in product sold for multiple clients (for example, in theme sold on Themeforest)?

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.

Is this a one time payment?

All licenses are perpetual for the licensed version of the software: you can use them for as long as you like.