Fancyapps

Compact Mode ​

This plugin uses the window.matchMedia() method to determine if a document matches the specified media query and continuously monitors for changes to determine when compact mode should be enabled.

When compact mode is activated, the plugin rearranges interface elements and changes click event behavior to replicate the mobile Photos app experience.

Basic example ​

Resize the window to see the effect. By default, compact mode is turned on if any window dimension is smaller than 578 pixels.

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

Usage ​

Include corresponding JS and CSS files:

js
import { Compactmode } from "@fancyapps/ui/dist/fancybox/fancybox.compactmode.js";
import "@fancyapps/ui/dist/fancybox/fancybox.compactmode.css";

Use plugins option to pass Compactmode to Fancybox constructor.

js
Fancybox.bind("[data-fancybox]", {
  plugins: { Compactmode },
});

Options ​

mediaQuery ​

A string specifying the media query to watch

Type

string

Default

"(max-width: 578px), (max-height: 578px)"

Methods ​

isEnabled ​

Check if compact mode is enabled

Returns

boolean