Preview of fancyapps UI components

The project now has three separate components: Panzoom, Carousel and Lightbox/Fancybox. All components are extendable, fully responsive and mobile friendly. Rollup and Babel are used to transpile ES6 Vanilla JavaScript code and to generate a standalone bundle.

Panzoom

Panning and zooming for any HTML element. Two-finger gestures are supported, too.

Vector based animations look smooth and make dragging look natural.

Highly customizable - base/min/max zoom levels, click/double-click, touch and wheel events, etc.

Supports <picture> element for maximum responsiveness.

Carousel

Built on top on Panzoom, inherits the same smooth animations and natural feel. Infinite navigation without absolutely positioning slides or creating clones. Works perfectly when combining with lightbox, no same-ID conflicts, no page jumping while changing slides, etc. Slide width is controlled using CSS only and responds to any change. Supports any number of virtual slides. Supports lazy loading for images (background images, too).

Defaults:
{center : true, infinite: true}
{center : true, infinite: false, fill: true}
{center : true, infinite: false, fill: false}
{center : false, infinite: true}
{center : false, infinite: false}
{dragFree: true}

Fancybox

Tons of improvements from previous versions. Uses modern technologies (Flexbox, ResizeObserver, VisualViewport) to bring best UX. Modular structure allows to fullfill many feature requests (for example, Ken Burns effect). Images are not resized using JS, just clever combination of CSS (only the width of the wrapping element is adjusted to the width of the image, if necessary). This feature opens up new opportunities, for example, you could fit images only horizontally and allow to scroll vertically.

Image gallery

Do not hide scrollbars; close using wheel

Test heavy images (warning, each image is ~4.5mb): Open #1 Open #2 Open #3

Test API - zoom images to fit viewport on start:

Various examples

Notice: changes are preserved after closing the modal; focus trapping.
Notice: changes are not preserved.

Combine & Customize

Effortlessly combine Carousel with Fancybox. Notice: These images are lazy-loaded.

Fancy a parallax effect? You got it.

Use carousel as navigation for other one.

Roadmap