Fancyapps
Return to top
On this page

Toolbar

This built-in plugin creates a toolbar element with configurable items - buttons, links, or any HTML content.

NOTE

Since the toolbar is primarily useful for images, it is automatically disabled if there are no images in the current gallery. Set the option enabled: true to display a toolbar for any type of content.

Examples

Transformation controls

Use any button provided by the Panzoom component.

js
const options = {
  Toolbar: {
    display: {
      left: ["infobar"],
      middle: [
        "zoomIn",
        "zoomOut",
        "toggle1to1",
        "rotateCCW",
        "rotateCW",
        "flipX",
        "flipY",
      ],
      right: ["slideshow", "thumbs", "close"],
    },
  },
};

JSFiddle Example

Download button

A download button is also available. Use data-download-src attribute to customize the download button's download link. Use data-download-filename attribute to suggest the filename.

TIP

The script uses standard HTML attributes for the download link. Read the documentation for the anchor element to learn how they work.

html
<a
  href="https://lipsum.app/id/15/1600x1200/"
  data-fancybox="gallery"
  data-download-src="https://lipsum.app/id/15/3200x2400"
>
  <img src="https://lipsum.app/id/15/200x150" />
</a>
js
const options = {
  Toolbar: {
    display: {
      left: ["infobar"],
      middle: [],
      right: ["slideshow", "download", "thumbs", "close"],
    },
  },
};

JSFiddle Example

js
const options = {
  Carousel: {
    Navigation: false,
  },
  Toolbar: {
    display: {
      left: [],
      middle: ["prev", "infobar", "next"],
      right: ["close"],
    },
  },
};

JSFiddle Example

Custom button

js
const options = {
  Toolbar: {
    items: {
      facebook: {
        tpl: `<button class="f-button"><svg><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></button>`,
        click: () => {
          window.open(
            `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
              window.location.href
            )}&t=${encodeURIComponent(document.title)}`,
            "",
            "left=0,top=0,width=600,height=300,menubar=no,toolbar=no,resizable=yes,scrollbars=yes"
          );
        },
      },
    },
    display: {
      left: ["infobar"],
      middle: [],
      right: ["facebook", "close"],
    },
  },
};

JSFiddle Example

Options

absolute

If absolutely position container; auto - absolutely positioned if there is no item in the middle column.

Type

"auto" | boolean

Default

"auto"

display

What toolbar items to display

Type

Record<ToolbarPosition, Array<ToolbarItemKey>>

Default

{
  left: ["infobar"],
  middle: [],
  right: [
    "iterateZoom",
    "slideshow",
    "fullscreen",
    "thumbs",
    "close",
  ],
}

enabled

If auto - is only enabled if there is at least one image in the gallery.

Type

"auto" | boolean

Default

"auto"

items

Collection of all available toolbar items

Type

Record<keyof typeof ToolbarItems, ToolbarItemType>

Default

{
  infobar: {
    tpl: '<div class="fancybox__infobar" tabindex="-1"><span data-fancybox-current-index></span>/<span data-fancybox-count></span></div>',
  },
  download: {
    tpl: '<a class="f-button" title="{{DOWNLOAD}}" data-fancybox-download href="javasript:;"><svg><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12"/></svg></a>',
  },
  prev: {
    tpl: '<button class="f-button" title="{{PREV}}" data-fancybox-prev><svg><path d="m15 6-6 6 6 6"/></svg></button>',
  },
  next: {
    tpl: '<button class="f-button" title="{{NEXT}}" data-fancybox-next><svg><path d="m9 6 6 6-6 6"/></svg></button>',
  },
  slideshow: {
    tpl: '<button class="f-button" title="{{TOGGLE_SLIDESHOW}}" data-fancybox-toggle-slideshow><svg><g><path d="M8 4v16l13 -8z"></path></g><g><path d="M8 4v15M17 4v15"/></g></svg></button>',
  },
  fullscreen: {
    tpl: '<button class="f-button" title="{{TOGGLE_FULLSCREEN}}" data-fancybox-toggle-fullscreen><svg><g><path d="M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2M16 4h2a2 2 0 0 1 2 2v2M16 20h2a2 2 0 0 0 2-2v-2"/></g><g><path d="M15 19v-2a2 2 0 0 1 2-2h2M15 5v2a2 2 0 0 0 2 2h2M5 15h2a2 2 0 0 1 2 2v2M5 9h2a2 2 0 0 0 2-2V5"/></g></svg></button>',
  },
  thumbs: {
    tpl: '<button class="f-button" title="{{TOGGLE_THUMBS}}" data-fancybox-toggle-thumbs><svg><circle cx="5.5" cy="5.5" r="1"/><circle cx="12" cy="5.5" r="1"/><circle cx="18.5" cy="5.5" r="1"/><circle cx="5.5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="18.5" cy="12" r="1"/><circle cx="5.5" cy="18.5" r="1"/><circle cx="12" cy="18.5" r="1"/><circle cx="18.5" cy="18.5" r="1"/></svg></button>',
  },
  close: {
    tpl: '<button class="f-button" title="{{CLOSE}}" data-fancybox-close><svg><path d="m19.5 4.5-15 15M4.5 4.5l15 15"/></svg></button>',
  },
}

parentEl

Change where toolbar container is appended

Type

HTMLElement | null | (() => HTMLElement | null)

Default

function () { return this.instance.container?.querySelector(".fancybox__header") || null; }