add custom activator support

[gloddo]

Hi, Thank you for your work. This is a very useful component. I originally used it in one of my apps since version 0.1.9, and at that time, there was the possibility to use any element placed in the default slot of the "silentbox-single" component as an activator for the silentbox. As of now with version 2.0, I can't manage to reproduce this functionality.

I simply need to open the silentbox on a button click with my custom text. Am I missing something?

Thanks again.

[mtpiercey]

Not to overcomplicate things, but I figured I'd share my experience with using silentbox in my Nuxt app.

Basically, I imported it as a Vue plugin (and set the mode to client in my nuxt.config.js. I then made a custom component that got triggered to appear upon the click of a button (dead simple @click="showLightbox = true" type thing).

Then, and I will confide that this is most certainly hacky, but here's a snippet from the custom lightbox component:

<template>
  <silent-box :gallery="images" @silentbox-overlay-hidden="hideLightbox" />
</template>

<script>
export default {
  data: () => ({
    images: [
      {
        src: 'images/logos/png/botinabox-chippy.png'
      }
    ]
  }),
  mounted () {
    this.$nextTick(() => {
      this.$children[0].openOverlay()
      this.$children[0].showNextItem()
    })
  },
  methods: {
    hideLightbox () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss">
#silentbox-gallery {
  position: absolute;
  left: 300vw;
}
</style>

Basically this turns silentbox into a pop-up on click, showing the overlay and the "next" (or I guess in this case the first) item in the images array.

And this is how I implemented the closing mechanism:

<Lightbox v-if="showLightbox" @close="showLightbox = false" />

A fair caveat is that this way of doing things somehow breaks the previous and next buttons. Probably because I moved them with my CSS. At any rate, arrow keys still work...

Silentbox is a super-powerful component, so even such a weird use case can be implemented, if you have enough patience... :)

[silencesys]

@gloddo thank you for your suggestion! To be honest, I did not realise that there was such a possibility. 🙂 However, from now on the custom activators are supported and more can be found in readme.