lucaspulliese / vue-cool-lightbox Goto Github PK

So I am trying to implement this with Nuxt, and I keep getting this error. Cannot read property 'clientWidth' of undefined when I was trying #19.

I am loading this in the component rather than loading it globally from the plugins folder.

Please let me know how to fix this.

Hi, great work.

I'm having a problem when displaying the lightbox when the page has scrolled down from the original position of the component. I'm programmatically opening the lightbox from different parts of the page, and passing in different images.

The problem is that half the background is cut off.

"nuxt": "^2.14.5",
"vue-cool-lightbox": "^2.5.2",
"@nuxtjs/vuetify": "^1.11.2",

To reproduce:
https://pastebin.pl/view/221c71ca

Ideally, when I click on an image/video, the underlying page should not scroll to the top. When I click out of the image/video, I expect the underlying page to look exactly the same as before I clicked the image. Instead, the underlying page is scrolled to the top.

Hi,
First some credits to this package, it comes really close to Fancybox in my opinion.
However, swiping on mobile isn't as user friendly as I hoped for.

For instance in Fancybox:

• Swiping up is closing the popup (now it scrolls the page behind)
• Swiping left or right leads to moving the image according to your movement, it feels snappy. (now it could scroll the page behind if not swiped perfectly horizontally)

Are there any plans for optimizing this behavior?

Reading through your docs, and I can't see any autoplay prop for

Unless it's hidden somewhere, I'll start making a PR for this feature :)

YouTube offers an API for embed videos with less cookies:

https://www.youtube-nocookie.com/embed/YOUTUBE_ID

Unfortunately, this does not work for this lightbox. In terms of data protection, this would be very relevant for European countries. Any chance to support this?

I have a problem running it in deploy mode but running it in normal development mode, can anyone help?

running in dev

running in deploy

Hey,
Is it currently possible to specify thumbnail URLs and full image URLs separately? I would like to display a grid with small thumbnails and lazy load the full images either when they are opened or I am likely to view it.
I have some large images and I don't want to unnecessarily load them in full resolution if a user never actually views them.

Hi,
I don't know why this happen , but when i add this package to my nuxt project and go to dev mode it starts showing errors about core-js , here is the gist showing the error
can you guess why it happens ?
I did test this several times by adding and removing it to the same project only and this package made it happen.
thanks

First of all, thanks for this super useful tool!

I am trying to implement several slideshows for each section on a page as the result of a for-loop:

<template>
  <section v-for="app in page.apps" :key="app.id">
    <CoolLightBox 
      :items="items" 
      :index="index"
      loop
      @close="index = null">
    </CoolLightBox>

    <div class="images-wrapper">
      <div
        class="image"
        v-for="(image, imageIndex) in items"
        :key="imageIndex"
        @click="setIndex(imageIndex)"
        :style="{ backgroundImage: 'url(' + image.src + ')' }"
      ></div>
    </div>
  </section>
</template>

However, this gets me stuck in an endless loop. As I am still a Vue beginner, I am a little lost on how to make multiple slideshows possible. Maybe you could point me in the right direction?

Thanks!

Hello

First of all, thanks a lot for this lightbox : it's easy to use and it has really nice features

I have a problem though, which is similar to #2 : I use the distinction between "src" and "thumb" attribute in my items, but when I click on an image, I can see in the network tab of my devtools that all full-resolution image are downloaded immediately anyways (which is slow with dozens of images).

I checked that the correct images are displayed everywhere, i.e. in the thumbnail tabs the "thumb" image is displayed and the main image is the "src" one, which is the case

My code looks like this :

<template>
  <b-container fluid class="pl-5 pr-5">
    <cool-light-box
      :items="coolLightBoxItems"
      :index="index"
      @close="index = null"
      :fullScreen="true"
    />

    <b-row class="images-wrapper">
      <b-col
        cols="12"
        xl="4"
        lg="6"
        class="image-col mb-3"
        v-for="(image, imageIndex) in coolLightBoxItems"
        :key="imageIndex"
        @click="triggerLightbox(imageIndex)"
      >
        <b-img-lazy
          class="image"
          :src="image.thumb"
          :alt="image.description"
          :title="image.description"
          rounded
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
const CoolLightBox = () => import("vue-cool-lightbox");

export default {
  name: "Home",
  components: {
    CoolLightBox
  },
  data: () => ({
    photos: [
    {
        author: "First guy",
        description: "Cool photo",
        slug: "photo1"
    },
    {
        author: "Other dude",
        description: "Other photo",
        slug: "photo2"
    },
    {
        author: "First guy",
        description: "Guess what ? This is a photo",
        slug: "photo3"
    }],
    index: null
  }),
  computed: {
    coolLightBoxItems() {
      return this.photos.map(p => ({
        title: p.author,
        description: p.description,
        src: require(`@/assets/photos/${p.slug}.jpg`),
        thumb: require(`@/assets/photos/thumbnails/${p.slug}.jpg`)
      }));
    }
  },
  methods: {
    triggerLightbox(index) {
      this.index = index;
    }
  }
};
</script>

Is there any way to make the loading of full-size images truely lazy ? Did I miss an option somewhere ?

Thanks

Thanks for making this.

This is the only one that has worked 80% with nuxt among all other libraries. However i am getting this issue.

Actually I think drag/swipe is really feature that is missing.
Other than that I really like it, but it cant be used if there is no swipe for mobile devices :/

Would it be possible to set the type of all buttons to "button" inside the template? The default button type is "submit" and when the lightbox is used inside a form, it causes the form to be submitted.

Hey, this plugin is really cool, but it lacks alt attribute on img tag,
it would be also cool if it could have a dynamic alt tag (because of the new ADA regulations)

Hello, I feel like you should be able to zoom on every image, not just those that are bigger than the screen. I think this would make more sense.

Hi
I think it's good for UX if I can swap the direction that next and previous button goes in lightbox if possible in RTL templates, can you implement it if you don't mind ? like a dir option with ltr or rtl would be good to have

like for example I have 3 thumb images from right to left, clicking on the first from right opens the lightbox with index 0, now it should show the next button on the left of the light box that goes to index 1, but right now its on the right

this is what I want to achieve:

Hello @lucaspulliese,

I am trying to integrate vue-cool-lightbox in nuxtjs project but facing some issue.

I install the package via yarn

yarn add vue-cool-lightbox

I created cool-lightbox.js inside the plugins directory with following code.

import Vue from 'vue'
import CoolLightBox from 'vue-cool-lightbox'
Vue.use(CoolLightBox)

then include the plugin inside nuxt.config.js

plugins: [{ src: '~/plugins/cool-lightbox', ssr: false }],

Finally, I created Gallery.vue inside pages directory with following code.

<template>
  <div id="app">
    <CoolLightBox
      :items="items"
      :index="index"
      :effect="'fade'"
      @close="index = null"
    >
    </CoolLightBox>

    <div class="images-wrapper">
      <div
        v-for="(image, imageIndex) in items"
        :key="imageIndex"
        class="image"
        :style="{ backgroundImage: 'url(' + image + ')' }"
        @click="index = imageIndex"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        'https://cosmos-images2.imgix.net/file/spina/photo/20565/191010_nature.jpg?ixlib=rails-2.1.4&auto=format&ch=Width%2CDPR&fit=max&w=835',
        'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*',
      ],
      index: null,
    }
  },
}
</script>

When I navigate to http://localhost:3000/gallery I am not able to see vue-cool-lightbox is integrated.

I can see the images gets loaded inside DOM in the console.

Please help me out.....

https://github.com/vinodugale257/nuxt-cool-lightbox

I was wondering if there was a way to load an image that is protected by auth headers. auth type Bearer token.

1. Add tooltip for the buttons. You can use <title> inside the SVG - it's not very accessible without it. The problem with using encapsulated title is that sometimes people want to make it another language so it's probably good to have a prop or a slot for that.
   

2. Add possibility to disable the gallery. I don't think that all users will want that, sometimes we just want a simple lightbox
   

Hi,
is there any possibility to add pinch-to-zoom or two-finger-zoom for mobile devices? Currently you state in the docs that it is disabled for mobile devices.

Thanks for your efforts, it's an amazing component!

Is it possible to show just 1 thumbnail and when it is opened, they gallery will have multiple items then.

Or even trigger it with a button, called "Open Gallery" and this opens tha gallery

Hi, I have a problem with performance depending on how many images I have. If I'm using 50 images everything is fast and smooth but when I change it to something more such as 500, the lightbox becomes very slow and takes around 2 seconds to open or change image.

I don't really know what to do with this. Another lightbox I was using before didn't have this issue.

Hello, first thing, this is a fantastic tool so thank you so much for the time and effort that has been put into it. It is simple to integrate, and works beautifully.

I'm not sure if this is an issue or a feature request, but on desktop (chrome) when I click outside of the image (see image below for click location) when the lightbox is open, the lightbox closes. This is what I expect and prefer.

When I do the same thing on a mobile device (tested on android and ios) the lightbox doesn't close, and in fact the lightbox controls at top right go away. I would prefer that a click the the overlay area always close the ligthbox.

Is this intentional behavior or is it something that can be fixed or added?

Thanks again!

I've saw the issue #8, but i don't works on my universal nuxt project. Can you help me ?

I was looking for the possibility to show one more PDF I couldn't find it... it would be good if there was a SLOT to be able to place the content you want.

Hey there!

I really like the lightbox. One thing that I'm missing is an option to pass in description a HTML. I'd like to add some URL in the description etc. Other thing that would need tweaking is the selectability of the text in the description and caption.

Best regards,

Filip

How to reproduce

1. Go to the official example https://vue-cool-lightbox.lucaspulliese.com/#example-video
2. Open the first video
3. Click Play
4. Click to next video

Now you can still hear the previous video is still playing in the background and if you click play in the current video, it will play overlapping the previous one. A free remix :)

Expected result
When clicking the Next or Previous button, the current playing video will stop and move on to the other video in the item list.

Hi! I'm really enjoy your plugin, thx for your work. But can you pls add mouse wheel control? It will be very comfortable

Right now I think that the color is hard coded as red, it would be nice to allow changing it like the progress indicator and as default match the color of the progress indicator, like if the user doesn't specify the color for the gallery it will match the progress color, this way the user can just change the progress color and it will reflect on the gallery, or if the wants to change the progress to one color and the gallery to another he just have to set both.

Hi, Im fairly new to Vue and in general am more of a backend developer. I've installed your component and found the following error to pop up in my console:
TypeError: url.match is not a function

To reproduce: click to open lightbox image, then click to close it. Message should appear in console.

My code:

<template>
    <div>
        <CoolLightBox
                :items="images"
                :index="index"
                :effect="'fade'"
                @close="index = null">
        </CoolLightBox>

        <div class="w-full grid grid-cols-2 gap-4 p-6 xl:grid-cols-3 xl:gap-2">
            <div v-for="(image, imageIndex) in images" :key="imageIndex" @click="index = imageIndex">
                <img class="h-64 lg:h-160 shadow-md w-full object-cover mx-auto" :src="image" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    import CoolLightBox from 'vue-cool-lightbox'
    import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

    export default {
        components: {
            CoolLightBox,
        },
        data() {
            return {
                index: null,
                images: [
                    'https://live.staticflickr.com/3764/13648592934_830b4e4184_k.jpg',
                    'https://live.staticflickr.com/7437/13678538425_c83588b2ae_k.jpg',
                    'https://live.staticflickr.com/3804/13547766014_311ddcfd42_k.jpg',
                    'https://live.staticflickr.com/7113/13678548935_5c6c33acaf_k.jpg',
                ]
            };
        },
    };
</script>

It looks like it's not a bug that keeps everything from working, but I can imagine this could break other stuff that I am not (yet) using.
Thought it be good to mention, maybe I've misconfigured or am missing a piece of code. Please let me know if this is the case.

Hi
I thought this should be a bug so maybe look into it?
when the lightbox is visible , just double click the darkened area (around the current picture) and the current slide loses the cool-lightbox__slide--current class , which shouldn't be the case and it becomes less visible.
also it would be nice to use user-select: none on the picture as well, double clicking around makes them highlighted (blue selection highlight) which I think looks bad (I noticed the draggable="false" attribute, but it's not enough)
tell me if you need a gif or a limited case to reproduce this issue.

It is great to have all the different slideshow options (zoom, thumbnails, etc.). However, for a more minimal version I would love to be able to toggle each option on and off / setting each to true or false. For some elements I can do a workaround by customizing the CSS, for example setting toolbar elements to display: none. But in particular I would like to switch off the zoom functionality when clicking on an enlarged image. Is there a way to do this right now? Otherwise I would find it a very useful enhancement to have several toggle options.

Would it be possible to have a parameter to set a video to be played inline or in modal box?

Hey, I'm using this in a NuxtJS project, and am running into an error when using it inside of a component, one that can appear on the page many times.

I am importing the lightbox into each component.

The lightbox opens fine, but upon closing I get Cannot read property 'childNodes' of undefined:

item = this.$refs.items[this.imgIndex].childNodes[0];

Within the resetZoom method.

Any ideas?

I noticed that when pressing pause on the slidershow it does actually resets meaning it's not actually a pause button but a stop one, perhaps you should change the icon or implement an actual pause for the slidershow.

Thank you

Hey, @lucaspulliese , it's me again, xD. If I use a signed Amazon URL with Cloudfront like this...

http://xyz.cloudfront.net/xyz.pdf?Expires=1591994230&Policy=eyJTDXYZBLABLABLABLABLALONGBLABLALIKE5109CHARS&Key-Pair-Id=APKAXYZAMXYZ

and I pass it by property "iframe" or "pdf" this keeps rendering it to me as an image. I tried to use the srcMediaType but nothing, it doesn't work

Is it correct that only mp4-videos are recognized and displayed as videos? If so, would love to see other formats such as .mov being supported. Thanks!

Google storage and other cloud providers will add an access key on to the url after the file extension.
These url's don't work in cool lightbox.

If you modify the checkIsMp4 and getVideoExt to check if the url contains a video extension instead of checking if it ends then it works.

I didn't submit a pull request in case that breaks any other functionality but these changes work in my project.

a have a error on charge the library, please help me

Having the CSS contained inside the component is bad cause it won't allow people to make changes without using the !important which is really bad. I recommend creating an external CSS file for theming, this way people can customize their own and include like import 'theme.css'.

Can't get multiple galleries to work on the same page, the first one works smoothly after that the others don't change the images, only the first one shows correctly.

Get this error when clicking on any image.

This is the line that is throwing the error:
var ytId = (url.match(youtubeRegex)) ? RegExp.$1 : false;

It would be cool to have a slot on the loading animation. I'm using in a website that is already using a progress animation and it feels off using the default one that is completely different.

Hi.
First of all, thanks for your useful and beautiful tool!

I realized lightbox doesn't work good in RTL pages or every wrapper that has "dir: rtl" property. it only shows first image.

Hope you fix this soon :)

Hello, I'm getting this error with 2.3.1 version every time I'm trying to close the slideshow (clicking outside the image or on close button):

client.js?06a0:84 TypeError: url.match is not a function
    at VueComponent.getYoutubeID (vue-cool-lightbox.esm.js?5547:1059)
    at VueComponent.getYoutubeUrl (vue-cool-lightbox.esm.js?5547:1072)
    at VueComponent.getVideoUrl (vue-cool-lightbox.esm.js?5547:1035)

the problem seems to be the fade effect, with swipe it works.

Original fancybox compensates scrollbar jump https://prnt.sc/ue57cw

So I love this package so much! You deserve much more love.

But I have an issue with my responsiveness, even though your demo examples are working! Super weird.

Here have a look:

Not sure why it is like that. Maybe because <CoolLightBox is quite nested. Or maybe because I'm using gridsome?

Another think I notice that when the resize event is fired, the style is not updated:

Sorry that I'm not uploading a demo with the problem. I'm just too lazy and I hope you might know whats up.

Cheers from Berlin

Hi! Please add scroll lock like a BodyScrollLock.