Fancyapps

Sidebar ​

The goal of this plugin is to make it easier to change the layout to create a sidebar. The caption of each slide is used for the sidebar content. If a slide does not have a caption, a fallback text is displayed, which can be customized using the defaultCaption option.

Examples ​

Basic example ​

Gallery picture #1Gallery picture #2Gallery picture #3

Customized ​

You can optionally disable the toolbar and show your own closing element instead by adding the data-fancybox-close attribute.

Sidebar width and padding can be customized with CSS variables, which can also be passed in with JS.

Gallery

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper, justo eget vehicula vestibulum, enim enim suscipit lectus, et sagittis nibh risus vel metus.

Quisque eu ornare ante, et gravida mauris. Vivamus massa justo, sagittis non viverra sed, sodales non nisi.

Gallery picture #1Gallery picture #2Gallery picture #3

Toolbar button ​

This plugin adds an additional button sidebar to the Carousel Toolbar plugin that toggles the sidebar. This example also demonstrates the option when the sidebar is not initially visible:

Gallery picture #1Gallery picture #2Gallery picture #3

Usage ​

Include corresponding JS and CSS files:

js
import { Sidebar } from "@fancyapps/ui/dist/fancybox/fancybox.sidebar.js";
import "@fancyapps/ui/dist/fancybox/fancybox.sidebar.css";

Use plugins option to pass Sidebar to Fancybox constructor.

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

Use the plugin name as the option name to pass custom options. Example:

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

Options ​

defaultCaption ​

Default content to display in the sidebar if the active slide has no caption

Type

string | ((instance: FancyboxInstance) => string)

Default

"<em>{{NO_CAPTION}}</em>"

mainTpl ​

HTML template for Fancybox main structure

Type

string

Default

html
<dialog class="fancybox__dialog">
  <div class="fancybox__container" tabindex="0" aria-label="{{MODAL}}">
    <div class="fancybox__backdrop"></div>
    <div class="fancybox__carousel">
      <div class="fancybox__grid">
        <div class="fancybox__column with-viewport">
          <div class="fancybox__viewport"></div>
        </div>
        <div class="fancybox__column with-sidebar">
          <div class="fancybox__sidebar"></div>
        </div>
      </div>
    </div>
  </div>
</dialog>

showOnStart ​

If the sidebar should be visible after launching Fancybox

Type

boolean

Default

true