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 uses the Carousel component under the hood, and the Panzoom component is used to make the images interactive.

Key Features

• Support for images, iframes, Ajax, 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
• Three types of thumbnails
• Mouse panning
• Multiple active instances at the same time
• Many configuration options including CSS transitions, RTL, etc.

Examples

Modern thumbnailsClassic thumbnailsScrollable thumbnailsNo thumbnailsFade transitionCrossfade transitionSliding animationNo animationDark themeLight themeAuto

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.

Hey there!

Content of the nested modal.

RTL

Combined with Carousel

There is no need to take any additional steps to combine Carousel with Fancybox. They will sync automatically, no additional code is required.

JS Bin Example