Sidebar

While it is possible to create any layout using the mainTpl option along with custom CSS, this plugin makes it easy for you to create a two-column layout with a sidebar by modifying the layout and using ready-made CSS.

Sidebar contents

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.

Since a static gallery description is often needed, for your convenience, you can set the sidebar content from an HTML element on the page. To do this, create an element with a data-fancybox-caption attribute that has the same value as the data-fancybox attribute of your trigger elements.

Tip: You can also disable the toolbar and instead make any HTML element act as a closing element by adding the data-fancybox-close attribute.

Example:

<div data-fancybox-caption="gallery" style="display: none">
  Sidebar content
  <button class="f-button" title="Close" data-fancybox-close>Close</button>
</div>

<a data-fancybox="gallery" href="https://lipsum.app/id/17/1800x1200">
  <img alt="Gallery picture #1" src="https://lipsum.app/id/17/300x200" width="300" height="200" />
</a>

Examples

Basic example

JS Bin Example

Customized

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

Fancybox.bind("[data-fancybox]", {
  plugins: {
    Sidebar,
  },
  dragToClose: false,
  closeButton: false,
  Carousel: {
    Toolbar: false,
    Thumbs: {
      type: "classic",
    },
  },
  mainStyle: {
    "--sidebar-width": "clamp(100px, 33vw, 500px)",
    "--sidebar-padding": "0.5rem 1.5rem",
  },
});

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.

JS Bin Example

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:

Fancybox.bind("[data-fancybox]", {
  plugins: {
    Sidebar,
  },
  Sidebar: {
    showOnStart: false,
  },
  Carousel: {
    Toolbar: {
      absolute: false,
      display: {
        left: [],
        middle: ["counter"],
        right: ["sidebar", "close"],
      },
    },
  },
});

JS Bin Example

Usage

Include corresponding JS and CSS files:

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.

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

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

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

<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