search

silencesys / silentbox

A lightbox inspired Vue.js component.
https://silentbox.rocek.dev
MIT License
296 stars 51 forks source link

How to display only one image of gallery #57

Closed EricTalv closed 3 years ago

EricTalv commented 3 years ago

Hello!

I want to have silentbox only display one image of the whole gallery, so when you press on the one image you can scroll through that certain gallery.

I understand that with this: `

` I can only Display one image, but I want, if pressed on, to then show the whole gallery. Is this possible? -Thanks!
EricTalv commented 3 years ago

Hello!

I figured out a way to do this in a css hacky way with this:

#silentbox-gallery {
  .silentbox-item {
    &:nth-child(n+2) {
      display: none;

    }
  }
}

This basically just hides anything after the first image.

Let me know if there's a better way of doing this.

silencesys commented 3 years ago

Hey,

as is written in the readme for that purpose you should use preview-count attribute. 🙂

So, in your case the code would look like:

<silent-box :gallery="images" :preview-count="1"><!-- additional content --></silent-box>