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.

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.

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

With fancybox you could do something like this in pure js

window.Plyr = require('plyr/src/js/plyr');

$("[data-fancybox]").fancybox({
    afterShow: function() {
        const player = new Plyr.setup('.fancybox-video', {});
    }
});

but with vue-cool-lightbox i can do it like this

<template>
      <CoolLightBox
        :items="data"
        :index="imageIndex"
        :effect="'fade'"
        :use-zoom-bar="true"
        @close="imageIndex = null"
        @on-open="plyr"
      >
      </CoolLightBox>
</template>

<script>
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'

export default {
  methods: {
    plyr() {
      return Plyr.setup('.cool-lightbox-video')
    }
  },
}
</script>

it works, but when i click the middle play button, then the lightbox is closing same for the bottom left play button or other plyr interaction buttons see video for demonstration

https://user-images.githubusercontent.com/73314940/112304300-9e636400-8c9d-11eb-9bfc-39bfc9998d0a.mp4

Youtube link: https://youtu.be/ETddGVtEQbk

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?

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

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?

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 :/

Hi, This package is awesome. Thank you for creating it. I only have one issue with it. It keeps throwing error in the console:

bodyScrollLock.esm.js?e181:192 enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.

I am using chrome on windows 10.

Any ideas on how to fix this?

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.

In my case, the server would send a url that looks something like https://example.com/v1/media/abcdef?query=123. I dug into the source code and found a function called getVideoUrl where it return false for url that isnt youtube,video, or end with some extension.

I did specify the mediaType to 'video', therefore, it should just return the url instead of false as a fallback. Thank you.

I'm using nuxt content to render the page and sometimes it throws an exception that the childnodes are empty, which causes my whole page to go blank.

I not sure how to trigger, maybe the page hasn't finished loading yet, but I mouse clicked around

I've added a way to avoid throwing this exception by determining in advance if the childnode is empty

Do you have an integration example for nuxtjs3 ?

the current conf is not working

this is what i tested

create a plugin useCoolLightBox.client.js

import { defineNuxtPlugin } from '#app'
import CoolLightBox from "vue-cool-lightbox";

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

and try to use it in front

<template>
		<div class="col-12">
						<CoolLightBox :items="images" :index="index" @close="index = null">
						</CoolLightBox>

						<div class="images-wrapper">
							<div class="image">
								<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/>
								<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/>
							</div>
						</div>
</template>
<script lang="ts" setup>
const images = ref(["https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg","https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"])
</script>

this error in console

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.vue_render (vue-cool-lightbox.esm.js:1816:91) at renderComponentRoot (runtime-core.esm-bundler.js:898:44) at hydrateSubTree (runtime-core.esm-bundler.js:5603:44) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5624:25) at ReactiveEffect.run (reactivity.esm-bundler.js:187:25) at instance.update (runtime-core.esm-bundler.js:5745:56) at setupRenderEffect (runtime-core.esm-bundler.js:5759:9) at mountComponent (runtime-core.esm-bundler.js:5541:9) at hydrateNode (runtime-core.esm-bundler.js:4730:21) at hydrateChildren (runtime-core.esm-bundler.js:4869:24) Thanks

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

How can I load single video by clicking on it?

<div v-on:click="startVideo(post.media_url)" class="ratio ratio-16x9">
    <video autoplay muted>
        <source :src="post.media_url" type="video/mp4">
    </video>
</div>

///////////

components: {
    CoolLightBox
},
methods: {
    startVideo(url) {
        var gallery = [{
            src: url,
            autoplay: true
        }];
        // Then what should be here to load video?
    },
}

I use gridsome for my application but the images in the lightbox not shown

what is the correct url to render the image for lightbox. It only works with absolute live path. Images are stored in dev mode in /assets/images/.... after the gridsome build command in /asssets/img/...

new image name after build process assets/img/berg-1.175db75e.jpg

components: { CoolLightBox, }, data() { return { items: [ { title: 'a beautiful mountain view', description: "", src: '~@/images/products/schlossberg/berg-1.jpg', }, { title: 'a beautiful mountain view', description: "", src: '~@/images/products/schlossberg/berg-2.jpg', }, { title: 'a beautiful mountain view', description: "", src: '~@/images/products/schlossberg/berg-3.jpg', }, { title: 'a beautiful mountain view', description: "", src: '~@/images/products/schlossberg/berg-5.jpg', }, ], index: null } },

I integrated next gen images format and this packages has no way to use multiple formats for the image (using tag). Would be nice to have this support.

Update:

Actually I see that there is support for picture tag, however it doesn't work properly for my case, here is example of using the component:

    <cool-light-box
      v-if="!['sm', 'md'].includes(screenSize)"
      :items="venue.photos.map(p => ({
        src: p.photo_rectangular,
        picture: {
          sources: [
            {srcset: p.photo_rectangular_webp, type: 'image/webp'},
            {srcset: p.photo_rectangular, type: 'image/jpeg'},
          ],
        },
      }))"
      :index="index"
      @close="index = null"
    />

It generates correct picture tag, however it still loading all the jpeg images, I think there is some issue with lazy loading and how browser responds when srcset and src are replaces. My suggestion is just to add loading="lazy" to img tag instead of using own custom lazy loading solution, as it may not work properly with tag.

This is images initially loaded on page: https://monosnap.com/file/DPoVXb0LLONsX0C0KRvWMsUFo7dWOs all webp. This is when I open lightbox: https://monosnap.com/file/yl7UpnNxLPKRe5Faou8HwRrkFHvatA it loads all jpegs instead. This is rendered picture tag in the lightbox which is correct: https://monosnap.com/file/XxHlHOvEjLQbpncY2NetKGueuseF6z But still it loads jpegs.