Dynamic toolbar icon sets

[dmcrlsn]

I want to have the set of icons appearing in the toolbar to be dynamic, changing to a smaller set when the window width is below a threshold or the device is in portrait orientation (i.e. a phone held vertically). The displayed icon set should visibly update whenever the threshold is crossed or the orientation changes in either direction.

I have this mostly working by monitoring "resize" with window.addEventListener(), detecting when the width threshold is crossed or the window orientation changes and then calling Fancybox.bind() again with the appropriate toolbar icon set and then calling location.reload() to get Fancybox to display the new icon set.

The question is: Is there a better or more correct way to do this that doesn't require calling location.reload()? Calling location.reload() seems heavy-handed and I'd like to avoid it if possible.

[fancyapps]

Hi,

Since Fancybox displays an instance of Carousel, you can use its breakpoints option, like this:

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Toolbar: {
      display: {
        left: ["counter"],
        middle: [],
        right: ["thumbs", "close"],
      },
    },
    breakpoints: {
      "(min-width: 768px)": {
        Toolbar: {
          display: {
            left: ["counter"],
            middle: [
              "zoomIn",
              "zoomOut",
              "toggle1to1",
              "rotateCCW",
              "rotateCW",
              "flipX",
              "flipY",
            ],
            right: ["autoplay", "thumbs", "close"],
          },
        },
      },
    },
  },
})

https://jsbin.com/tadahihada/edit?html,output

[dmcrlsn]

This works perfectly, thanks!