fancybox toolbar for html content type about ui HOT 5 CLOSED

Hi

Perhaps there should be a more prominent warning, but there is an explanation at the beginning of the documents -

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.

https://fancyapps.com/fancybox/plugins/toolbar/

from ui.

Sorry, but you probably didn’t look carefully at the presented method; the toolbar is enabled in it

methods: {
startFancy(pdfSrc) {
const options = {
Toolbar: {
enabled: true,
absolute:false,
display: {
left: [],
middle: ["zoomIn", "zoomOut"],
right: ["download", "close"],
},
}
};
const app = createApp(PdfViewer, { pdfSrc });
const vm = app.mount(document.createElement('div'));

Fancybox.show([
{
src: vm.$el,
type:"html",
},
], options);
}},

and I get the container
fancybox__container is-compact has-toolbar

from ui.

Hmm, can you show some live demo?

from ui.

In general, the toolbar is not shown if there is no point in showing it. For example, what's the point of zoom in/out buttons if they won't work, or show a slideshow, next/prev arrows if there's no gallery, show a thumbnail icon if there's no thumbs, etc.

from ui.

I've created two demos showing how to display download and close buttons on the toolbar for any content type:

https://jsfiddle.net/qbu1p45z/

<button data-fancybox data-src="#dialog-content" data-download-src="https://fancyapps.com/sample.pdf">Launch Dialog</button>

Fancybox.bind('[data-fancybox]', {
  Toolbar: {
    enabled: true,
    absolute:false,
    display: {
      left: [],
      right: ["download", "close"],
    },
  }
});    

https://jsfiddle.net/fgdnmjhv/

Fancybox.show([{
  src : "#dialog-content",
  type: "clone",
  downloadSrc: "https://fancyapps.com/sample.pdf"
}], {
  Toolbar: {
    enabled: true,
    absolute:false,
    display: {
      left: [],
      right: ["download", "close"],
    },
  }
});    

from ui.