fancyBox3

jQuery lightbox script for displaying images, videos and more.
Touch enabled, responsive and fully customizable.

Download

Quick start

    				
<!-- 1. Add latest jQuery and fancyBox files -->

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>

<link  href="/path/to/fancybox.css" rel="stylesheet">
<script src="/path/to/fancybox.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>

See the documentation

Why fancyBox

Mobile first

Looks great on every device.
Supports most common touch gestures - double-tap, pinch-in and pinch-out for image viewing; horizontal swipe for navigation.

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 content dimensions using any CSS unit and the browser will do the rest.
All graphics, including loading icon, are created with CSS only.

Showcase

Image gallery

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.

Supported sites can be used with fancyBox by just providing the page URL. You can mix images, videos and any HTML content in each gallery.

Advanced

A small set of examples demonstrating creative usage of fancyBox. These are advanced examples and require addtional JS and CSS code.

Customized layout

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

Confirm dialog

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

Product quick view

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

Morphing modal overlay

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