silencesys/silentbox

A lightbox inspired Vue.js component.

silentbox's Issues

Emit event with current item when move to next or previous item

Existing events are fired without valueable data.
At least item number refer to :gallery is need.

Nuxt 3 Support

Can it support Nuxt 3 to re-use it as a component or plugin?

Providing some example code/app would be helpful.

youtube Video popup

How to use youtube video popup?

It only display a Dark Black overlay window with no Picture with Vue.js

It only display a Dark Black overlay window with no Picture.
Think i'll need help.

Am using Vue.js with the Visual Code Basic as the tool.

I have did the "import" as well as the "Vue.use()" at main.js; below is the code that I copied from the given demo site.

          <b-row>
            <b-col md="12">
              <silentbox-single
                src="../uploads/familyFree.jpg"
                description="The Arctic Light by Terje Sorgjerd"
              >
                <img src="../components/img/Phone2.png" width="200px">
              </silentbox-single>
            </b-col>
          </b-row>

I use bootstrap vue, could there be any problem when using with it.

报错

$option is not defined

Static ID is generating same thumbnail always for Vimeo

silentbox/src/mixins/item.js

Line 31 in 0333319

const videoDetails = this.httpGet('https://vimeo.com/api/v2/video/54802209.json')

Dependencies missing

I had to add node-sass and sass-loader to my Dev dependencies in order to build the project for version 0.1.2, I'm using Node v8.11.4, NPM 6.4.1 and Vue version 2.5.2.

silentbox-is-opened class isn’t removed after closing silentbox

I’m using silentbox 3.0.4 in a Nuxt 3 app. When I open the silentbox and then close it with the close button or the escape key, the class silentbox-is-opened isn’t removed from the body element. The silentbox-overlay-hidden event isn’t fired either. I attached a screencap of this.

plugins/silent-box.ts:

import VueSilentbox from "vue-silentbox";
import "vue-silentbox/dist/style.css";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSilentbox);
});

app.vue (with options API, I can’t get silentbox working with composition API)

<template>
  <button type="button" @click.native="openSilentbox">Open silentbox</button>
  <silent-box
    @silentbox-overlay-hidden="hideTest"
    @silentbox-overlay-opened="openTest"
  />
</template>

<script>
export default {
  data() {
    return {
      images: [
        {
          src: "https://placehold.co/600x400",
        },
      ],
    };
  },
  methods: {
    openSilentbox() {
      this.$silentbox.open(this.images[0]);
    },
    hideTest() {
      console.log("hide");
    },
    openTest() {
      console.log("open");
    },
  },
};
</script>

Kapture.2023-08-23.at.16.49.10.mp4

Arrows are not displayed

Next and previous arrows are not displayed, but keyboard navigation is working.
I'm using silentbox with latest nuxt (2.13) and plugin is set in client mode. Everything is perfect besides this.

IE11 breaking when silentbox esm packaged into app.js in Nuxt

I am having trouble with what seems to be a javascript error originating in silentbox.

I am using silentbox in a Nuxt based project and it works great, except in Internet Explorer 11. When I test in IE11, I see a javascript error in the console like so:

When I inspect the referenced area in app.js I see:

I was not sure if this was because of my Nuxt setup, so I made a very simple example to see if I still have the error. My code is located here https://github.com/maskott/silentbox-test and you can see the example live at https://truthful-dad.surge.sh/ (working fine in Chrome, but breaking in IE11).

Thank you for any light you may be able to shed on this issue!

thumbnailHeight does not maintain aspect ratio

Hi,
when I use thumbnailWidth, the resulting <img> tag gets specified width and height=auto, but when I use thumbnailHeight, both height and width are set to that specified value.
Shouldn't thumbnailHeight preserve aspect ratio too?

Suggestion: add an option to import directly a component

Hello,

We are always trying to shrink assets to the minimum and make components load asynchronously only when necessary as much as possible. The component being loaded globally as a plugin is kind of unfortunate.

I am tight on time, so I will probably try to looks for other solution (which has turned out kind of difficult, when a person is looking for a vue3 lightbox, that also supports videos - your module has gotten closest so far :) ).

Cool src and very robust docs! ✌🏼

Čest :)

Documentation on end tags

I don't think you updated the end tags from version 1...
I was a bit confused on this. (- single) should be removed from the end tags

Thanks

Then in the template you use a silent-box component to display the gallery.

<silent-box :gallery="images"></silentbox-single> <silent-box :image="images[0]"></silentbox-single>

Doesn't center the view of the image into single item.

renaming attributes

hello, please is there a way to use this in real life? i have products on page which every has product_images Array and there i have image_path for every image..is there a way to tell silentbox that src is in this case image_path? thanks in advice

♿ Accessibility

Hi,
the gallery generated via this plugin is completely inaccessible. You cannot use keyboard at all. The items should be standard links with images, so that they are included in tab order of the page.

BR,
Jiri

Problem using the component on Safari (iPad)

Hello.

I was using this component on my SPA and it wasn't working on Safari (iPad version). There's a const that is being used on the component that doesn't work on Safari, showing a blank page.

After removig the component my page worked again, but i'll like to use it. There's any work around it?

silentbox is not compatible with SSR

I can't make silentbox work with server side rendering enabled.

Whenever I try to import vue-silentbox I get a 500 error with:

ReferenceError: document is not defined

It looks like I can't import it only in client mode. Also, I tried to import the single component directly, and use it with vue-no-ssr plugin without any luck.

Render local video file

Is there anyway to render a local video. I'm working with mp4 files. I would imagine this should work but it isn't:

<silentbox-item src="location/to/file.mp4">

I'm using the nuxt framework and have even tried serving the videos as static files:

<silentbox-item src="/file.mp4">
<silentbox-item src="http://localhost:3000/file.mp4">

Am I doing anything wrong or is this not built in to the library?

Arrow left and right isn't there on <silentbox-group>

Hi,
Vuejs SilentBox is very cool :) But the arrow left and right isn't there if I use the <silentbox-group> . I can slide next picture with the arrow keyboard.

This is my code :

<silentbox-group>
   <silentbox-item v-for="item in galerie" :key="item.ID" :src="item.sizes.large" :description="item.caption">
      <img :src="item.sizes.thumb_630" >
   </silentbox-item>
</silentbox-group>

Thank's for reply

Vimo Video URL is not supported

Is it possible to include Vimeo url as well?

JSON.parse error when Vimeo request for thumbnail fails

When a request to Vimeo API for a thumbnail fails (ie a 404) the component doesn't handle the error, and it tries to parse the response anyways.

Then there is a JSON.parse error

Still havent tried it in production, but in development that means that the whole page breaks.

There's a small fix to be done in item.js mixin when doing the XMLHttpRequest to handle this

I will gladly submit a PR for this if it's welcomed.

Chrome doesn't allow YouTube Autoplay

I have a simple <silent-box> implementation that uses a single :image where the src is a YouTube video with autoplay set to true. Everything works perfectly in Firefox and Safari, but Chrome does not seem to respect the autoplay and forces a user 1 additional click to start the video once the lightbox is opened.

Some cursory research seems to show adding allow="autoplay" on the embedding iframe element may allow Chrome to achieve this autoplay functionality. I will try to fork and investigate.

Youtube https://youtu.be/id short form is not supported

https://youtu.be/id short form of youtube id is not supported

Autoplay props not working in GogleChrome

Hi! I use this plagin in my SPA. But i have problem with crossbrowser working it. Autoplay props in this plugin good working in the Firefox and not working in GoogleChrome. Maybe you can help me on this.

Please update it to latest vuejs v3 + TypeScript

Please update it to latest vuejs v3 + TypeScript

Extra indentation

I have a code:

<silent-box
                :gallery="images"
                :preview-count="2"
                class="justify-center items-center flex mt-10 ml-10"
></silent-box>

<script setup>
import BackBtn from '@/components/Buttons/Back.vue'

const props = defineProps({
    category: {
        type: String,
        default: null
    },
    category2: {
        type: String,
        default: null
    }
});

const images = [
    {
        src: '/images/1.jpeg',
        description: 'Image 1',
        thumbnail: '/images/thumbs/1-th.jpeg',
        thumbnailHeight: 400,
        thumbnailWidth: 184,
        alt: 'Image Alt',
    },
    {
        src: '/images/2.jpeg',
        description: 'Image 2',
        thumbnail: '/images/thumbs/2-th.jpeg',
        thumbnailHeight: 400,
        thumbnailWidth: 225,
    },
];
</script>

And result is:

How can I rid of extra indention between images?

lazy loading ?

Hello, not sure how it works but apparently quite a few modern browsers support loding:lazy now.
I've checked the generated html by default and saw that this attribute is not present. Is there a way to add it ?
Or maybe you could add it by default ?

How to make a transition-group ?

I do have the following:

<silent-box :gallery="photos">
    <template #silentbox-item="{ silentboxItem }">
      <img :src="silentboxItem.src" />
	  ...
    </template>
</silent-box>

I'm not sure how to add transition-group to that kind of code. Tried it in pretty much any way without success.
Can you give me a tip for that one ? 😄

How to implement a sliding feature for the gallery items

I have a narrow space to display the thumbnail and i was wondering if this library offers a sliding feature for the thumbnail. otherwise how to implement one.

How to target an image from the gallery

I want to delete an image from the gallery.

Is it possible to target an image with an 'x' in the top corner, and not expand when selected?

The existing events don't prevent default behavior I think.

Thanks!

Open SilentBox without html activator?

Hello, I would like to ask a question concerning this splendid Vue package. I am using the Vue SilentBox for a preview-image section for my application. Based on my UI design, whenever user clicks on the button listed in the table, SilentBox will be opened, hence, I need to hide this part <silent-box :gallery="images"><!-- your additional content --></silent-box> by forcing CSS style. My question is how can open the SilentBox without displaying the original html activator? @silencesys

Click on image/description hides ovelay

I think that img,src,video and p, needs @click.stop.prevent ;)

Add download button.

Am still trying to figure out a way once the image clicked make a download button available on the top right, or left.
apparently there is not props for that.
Am open for suggestions please.

merge 2 galleries or hide images

add custom activator support

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.

Incompatible with SSR

This is a similar issue to this one: #14 but it has a different cause.

I'm using the latest version of vue-silentbox (0.1.9)

If I include the library, I get this error: document is not defined

It is from this line in vue-silentbox.esm.js

var HEAD = document.head || document.getElementsByTagName('head')[0];

Which is related to this issue in vue-component-compiler (which gets into vue-silentbox via rollup-plugin-vue) vuejs/vue-component-compiler#85

Is it possible to avoid using rollup-plugin-vue?

btoa is not defined

Get error "btoa is not defined"
Line 293 in vue-silentbox.umd.js

Cant add css to silentbox-item

Hello.

I am trying to add margin to the silentbox items.

I am using SCSS so this is the way I go about it:

#silentbox-gallery {
  .silentbox-item {
    margin:10px;
  }
}

This does not work.

Ive tried practically anything I could think off:

• add css to img tag
• add css to a tag
• add just regular css not scs
• add !important
• cry
• added silentbox to another page and tried it there but everythings the same

Nothing, and I mean nothing seems to work.

BUT

If i add something to #silentbox-gallery, that works really well.

you may see the project here, and specifically the page where I am trying to use silentbox

If anyone has any debugging wisdom or help I'd be very thankful.

-Thank you.

Doesn't work in scoped styles

When using it in a component with styled scope, ex :

<script scoped>
    export default {
        name: "Test",
        data() {
            return {
                images: [
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(76).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(77).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(78).webp'
        }]
            };
        }
    }
</script>

<style scoped>
    @import 'vue-silentbox/dist/style.css';
</style>

<template>
    <silent-box :gallery="images"></silent-box>
</template>

The images are present in the HTML but there is an issue with the CSS, that makes them invisible.

First picture in group doesn't seem to act as expected

Notised another issue now, for the first picture in the a group you have to press the arrow twice for it to change picture, it is the same way at the demo page, not in my application.

Adding buttons to the lightbox

Is there a built in way to add a button where the description goes? Like a slot or something? If not, is the best thing to do fork?

Improperly Packaged for NPM

This library looks great, but the fact the NPM package includes SASS and .vue files is not standard practice.

It means the library can't be used directly in the browser, and it means the user is required to ensure vue-loader includes node_modules (to translate the .vue files) and that their own project uses node-sass and sass-loader.

Here's the recommended best practice:

https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html#Can%E2%80%99t-I-Just-Share-vue-Files-Directly

change html tag of gallery container

I noticed the gallery always generates a <section> element as a wrapper. I need to use a plain <div> instead for semantic reasons. Can you add this in as an option, please?

How to display only one image of gallery

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:
<silent-box :image="images[0]"><!-- your additional content --></silent-box>

I can only Display one image, but I want, if pressed on, to then show the whole gallery.

Is this possible?

-Thanks!

Mixed content

Hi! Amazing plugin! Many thanks for developing it!

On my https site the videos on youtube don't load and i get a black screen with this error on console:

Mixed Content: The page at 'https://jsaidlerfotografia.com.br/' was loaded over HTTPS, but requested an insecure frame 'http://www.youtube.com/embed/ygVTaeRNiqk?rel=0'. This request has been blocked; the content must be served over HTTPS.

<silent-box :gallery="images"></silent-box>

data: function () {
    return {
      images: [
        { src: 'https://www.youtube.com/watch?v=ygVTaeRNiqk', thumbnailWidth: '100px' },
        { src: 'https://www.youtube.com/watch?v=Ip8Y8SZWmOY', thumbnailWidth: '100px' },
        { src: 'https://www.youtube.com/watch?v=WZRbzuWvq1g', thumbnailWidth: '100px' },
        { src: 'https://www.youtube.com/watch?v=9rxCH85eWxg', thumbnailWidth: '100px' },
        { src: 'https://www.youtube.com/watch?v=0GF4WuPZ2Q4', thumbnailWidth: '100px' }
      ]
    }

Version:

"_id": "[email protected]",

How can I display the popup?

I installed it, but I don't know how to display the array.

Just a little idea for your readme.md and your website - Method already accessible to open the lightbox

Hi ! I wanted to execute a method to open the lightbox so I dug into your lib a few seconds and found that the openOverlay method can totally do it with :
<silent-box ref="gal" :gallery="gallery"></silent-box>
and
this.$refs.gal.openOverlay(this.gallery[0], 0)
So I thought that you should maybe add this to the doc for other users of your library !
Cheers ;)