Skip to content
On this page

Fancybox

Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content.

This is the fifth generation of Fancybox. Both Carousel and Panzoom components are used under the hood and that's what makes this project so unique. In addition, Fancybox is easy to integrate into any JavaScript framework, see samples for React, Vue and Angular.

Key Features

  • Written in TypeScript, no external dependencies
  • Highly customizable with plenty of configuration options and CSS variables
  • Touch and mobile optimized with swipe, drag and pinch-to-zoom gestures
  • Multiple opened (active) instances at the same time
  • Two types of thumbnails - classic and modern new
  • Compact mode with a mobile-like user experience new
  • Various transformation controls new
  • Supports <picture> element new
  • Can handle gallery with infinite items new
  • Idle state new
  • Mouse panning new
  • Focus trap

Examples

Basic example

Gallery picture #1Gallery picture #2Gallery picture #3
Gallery picture #4Gallery picture #5Gallery picture #6

Transformation controls

Transformation picture #1Transformation picture #1Transformation picture #1

Mouse panning

Panning picture #1Panning picture #2Panning picture #3Panning picture #4

Videos

Video poster #1Video poster #2Video poster #3

Various

Combine

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

What's Next

See the Showcase page for more detailed examples. Check out additional samples on the corresponding plugin page, for example:

For installation and use instructions, see Get Started page.