Fancybox toolbar for html content type

люди добрые, помогите! Нужно добавить в toolbar стандартные кнопки "Zoom in", "Zoom out" и "Downlod"

вот метод для карусели, но работает и все замечательно

methods: {
startFancy() {
  const options = {
    Toolbar: {
      display: {
        left: [],
        middle: ["zoomIn", "zoomOut"],
        right: ["download", "close"],
      },
    },
  };
  Fancybox.show(this.images, options);
}

} и я получаю текую картину

<div class="fancybox__container has-toolbar" role="dialog" aria-modal="true" aria-label="You can close this modal content with the ESC key" tabindex="-1" id="fancybox-1" aria-hidden="false"><div class="fancybox__toolbar"><div class="fancybox__toolbar__column is-left"></div><div class="fancybox__toolbar__column is-middle"><button title="Zoom in" class="f-button" data-panzoom-action="zoomIn"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="7.5"></circle><path d="m21 21-4.35-4.35M11 8v6M8 11h6"></path></svg></button><button title="Zoom out" class="f-button" data-panzoom-action="zoomOut" disabled="" tabindex="-1"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="7.5"></circle><path d="m21 21-4.35-4.35M8 11h6"></path></svg></button></div><div class="fancybox__toolbar__column is-right"><a class="f-button" title="Download" data-fancybox-download="" href="/src/assets/images/img/1.jpg" download="/src/assets/images/img/1.jpg" target="_blank"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12"></path></svg></a><button class="f-button" title="Close" data-fancybox-close=""><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.5 4.5-15 15M4.5 4.5l15 15"></path></svg></button></div></div>
<div class="fancybox__backdrop"></div>
<div class="fancybox__carousel is-ltr is-horizontal has-thumbs"><div class="fancybox__viewport is-draggable"><div class="fancybox__track" aria-live="polite" style="transform: matrix(1, 0, 0, 1, 0, 0);"><div class="fancybox__slide has-image is-selected can-zoom_in is-done" data-index="0"><div class="fancybox__content" style="width: 765.323px; height: 579.082px; transform: matrix(1, 0, 0, 1, 0, 0);"><img src="/src/assets/images/img/1.jpg" alt="Image 1 of 4" draggable="false" fetchpriority="high" class="fancybox-image"></div></div><div class="fancybox__slide has-image is-done" data-index="1" aria-hidden="true"><div class="fancybox__content" style="width: 765.323px; height: 446.937px; transform: matrix(1, 0, 0, 1, 0, 0);"><img src="/src/assets/images/img/2.jpg" alt="Image 2 of 4" draggable="false" class="fancybox-image"></div></div><div class="fancybox__slide has-image is-done" data-index="3" aria-hidden="true" style="left: -2326px;"><div class="fancybox__content" style="width: 765.323px; height: 510.464px; transform: matrix(1, 0, 0, 1, 0, 0);"><img src="/src/assets/images/img/4.jpg" alt="Image 4 of 4" draggable="false" class="fancybox-image"></div></div></div></div><div class="fancybox__nav"><button tabindex="0" title="Next" class="f-button is-next" data-carousel-next="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"></path></svg></button><button tabindex="0" title="Previous" class="f-button is-prev" data-carousel-prev="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"></path></svg></button></div></div>
<div class="fancybox__footer"><div class="f-thumbs fancybox__thumbs is-modern is-ltr is-horizontal"><div class="f-thumbs__viewport"><div class="f-thumbs__track" aria-live="polite" style="--width: 200; transform: matrix(1, 0, 0, 1, 355, 0);"><div class="f-thumbs__slide for-image is-nav-selected" style="--progress: 1; --shift: 0;" data-index="0"><button class="f-thumbs__slide__button" tabindex="0" type="button" aria-label="Go to slide #1" data-carousel-index="0"><img class="f-thumbs__slide__img" alt="" src="/src/assets/images/img/1.jpg"></button></div><div class="f-thumbs__slide for-image" style="--shift: -45;" data-index="1"><button class="f-thumbs__slide__button" tabindex="0" type="button" aria-label="Go to slide #2" data-carousel-index="1"><img class="f-thumbs__slide__img" alt="" src="/src/assets/images/img/2.jpg"></button></div><div class="f-thumbs__slide for-image" style="--shift: -45;" data-index="2"><button class="f-thumbs__slide__button" tabindex="0" type="button" aria-label="Go to slide #3" data-carousel-index="2"><img class="f-thumbs__slide__img" alt="" src="/src/assets/images/img/3.jpg"></button></div><div class="f-thumbs__slide for-image" style="--shift: -45;" data-index="3"><button class="f-thumbs__slide__button" tabindex="0" type="button" aria-label="Go to slide #4" data-carousel-index="3"><img class="f-thumbs__slide__img" alt="" src="/src/assets/images/img/4.jpg"></button></div></div></div></div></div>

вот метод для html

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);
}},

и получаю

<div class="fancybox__container is-compact has-toolbar" role="dialog" aria-modal="true" aria-label="You can close this modal content with the ESC key" tabindex="-1" id="fancybox-1" aria-hidden="false"><div class="fancybox__toolbar"><div class="fancybox__toolbar__column is-left"></div><div class="fancybox__toolbar__column is-middle"></div><div class="fancybox__toolbar__column is-right"><button class="f-button" title="Close" data-fancybox-close=""><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.5 4.5-15 15M4.5 4.5l15 15"></path></svg></button></div></div>
<div class="fancybox__backdrop"></div>
<div class="fancybox__carousel is-ltr is-horizontal"><div class="fancybox__viewport"><div class="fancybox__track" aria-live="polite" style="transform: matrix(1, 0, 0, 1, 0, 0);"><div class="fancybox__slide has-html is-selected is-done" data-index="0"><div pdfsrc="/src/assets/textDoc.pdf" class="fancybox__content"><div><button> Prev </button><span>1 / 5</span><button> Next </button></div><div style="position: relative; display: block; overflow: hidden; --scale-factor: 1;"><canvas dir="ltr" style="display: block; width: 595px; height: 841px;" width="2380" height="3367"></canvas><!----><!----><div style="display: block;"></div><div style="position: absolute; width: 595px; height: 841px; top: 0px; left: 0px; display: none;"></div></div></div></div></div></div></div>
<div class="fancybox__footer"></div>

что я делаю не так, у fancy вроде написано, что кнопки можно использовать и с html контентом