Hiding toolbar items in fancybox

Question

I'm trying to get rid of the toolbar buttons on fancybox v4 but can't seem to get it work. I'm not very experienced with coding websites or with javascript, so my apologies if I'm missing something simple.

I'm using shopify and have:

    Fancybox.bind('[data-fancybox="gallery"]', {
      Toolbar: {
      display: [
        { id: "prev", position: "center" },
        { id: "counter", position: "center" },
        { id: "next", position: "center" },
        "close",
      ],
    },
  }); 

It's based off when I read in the docs, but I think I'm missing something because the slideshow, zoom and other buttons all still appear in the top right.

Thank you for any help!

Answer 1

I guess simple CSS display attribute might solve this issue. To hide something, use display: none;, to show item, use display: block;