Fancybox

Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. It is built using TypeScript for use with various modern application frameworks (React, Vue, etc) or simply with pure Javascript.

It is built using the Carousel component under the hood, and the Panzoom component is used to make the images interactive.

Key Features

• Support for images, iframes, videos and any other HTML content
• Automatic detection and display of YouTube, Vimeo videos and Google Maps
• Swipe, drag and pinch-to-zoom gestures
• Fully customizable toolbar with optional transformation controls
• Two types of thumbnails
• Mouse panning
• Multiple active instances at the same time
• Many configuration options including CSS transitions, RTL, etc.

Examples

Modern thumbnailsClassic thumbnailsNo thumbnailsFade transitionCrossfade transitionSlide transitionNo animationThemeDarkLightAuto

Transformation controls

Mouse panning

Videos

Various

Hello, world!

Try pressing the Tab key and notice that the user is blocked from navigating the rest of the page.

To close dialog hit the Esc button, click on the overlay or just click the close button.

Element used to launch the modal would receive focus back after closing.

Combined with Carousel

You don't need to do any additional steps to combine Carousel with Fancybox. They will be automatically synced, no additional code is required.