pexea12 / vue-image-lightbox Goto Github PK

Throw SyntaxError: lack of ":", can't find the reason. help !!!

I am using the example with lazy-load (.src) and then openGallery to get Lightbox to show.

Since a typical page may have 20 images or so, and, they could be large, I notice that its the large images (not the thumbs) that are put into the thumb (background on small divs) then when click, it starts lightbox at that image. Which is great. But is there any way to only have the thumbs lazy-loaded, then, when opening lightbox gallery, only then have the full size image lazy loaded, as it's possible not all visitors to the page will even want to click photos.

Here is my code (so maybe it's just a simple adjustment you can recommend, or I've missed something likely, looks great by the way).

<ul class="photoThumbs">
    <li class="thumb-li"
      v-for="(image, index) in images" >
      <div v-lazy:background-image="image.src"  :class="'lazy-thumb'" @click="openGallery(index)">
      </div>

Tried to go with ="image.thumb" but then open LightBox and only get a gallery of the small thumbs. At 8,000 pages with 10 to 20 images per page, and heavy traffic, I'd prefer to download thumbs and only download the large image when someone clicks the thumb or moves to next image in the gallery. Hopefullly I've just not missed something.

in my project i'm using lightbox and i need to keep an eye on lightBoxOn to control sidebar show/hide. so it'll be great having lightBoxOn event.

When I use npm install the plugin, I find .vue-lb-container 'z-index' is 1, because it is 1 in dist/vue-image-lightbox.min.css, but it is 2001 in your src/components/style.css, I wish your guys can fix it.

situation:
After dynamically modification the :images property (add or remove) displayThumbs and countImages properties not updated

It will throw the SyntaxError: lack of ":"

It will be cool if we can zoom in and out.

After update vue-image-lightbox have error:
"[Vue warn]: Failed to mount component: template or render function not defined.
(found in )"

I'm getting the following error during page-load:

[Vue warn]: Error in mounted hook: "TypeError: undefined is not an object (evaluating 't.addEventListener')"

found in

---> <Lightbox> at src/components/LightBox.vue
       <Root>

Here's how I am rendering it out:

import LazyLoad from 'vue-lazyload';
import Lightbox from 'vue-image-lightbox';
Vue.use(LazyLoad);
Vue.component("lightbox", Lightbox);

    data: function () {
        return {
            lightboxImages: [],
        };
    },

            <lightbox ref="lightbox" :images="lightboxImages" :show-light-box="false" :show-caption="true"></lightbox>

It appears to have to do with this line:

    const hammer = new Hammer(this.$refs.container)

where this.$refs.container is undefined.
Updating this to the following seems to have worked:

    if (this.$refs.container || false) {
        console.log(this.$refs);
        const hammer = new Hammer(this.$refs.container)

        hammer.on('swiperight', () => {
          this.previousImage()
        })

        hammer.on('swipeleft', () => {
          this.nextImage()
        })
    }

Any thoughts on what may be causing this? It seems to work fine; but I need to clear any errors from the console. Thanks! :)

showImage will scroll the view to the top of the page, but i want it to be the place as when i call it, how can i do that?

Hey I really like this component, but am running into some issues with refreshing the page in my Nuxt app.

Here are my dependencies:
"nuxt": "^2.0.0",
"vue-image-lightbox": "^6.0.1",
"vue-lazyload": "^1.2.6",
"vue-touch": "^1.1.0",

and here is the page using the lightbox component

I have set up Lazyload as a Nuxt plugin like this

plugins/lazyLoad.js:
import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad)

nuxt.config.js:
'@/plugins/lazyLoad

What ive tried:

• ssr false for plugin { src: '@/plugins/lazyLoad', ssr: false }
• <no-ssr> tags wrapped around <Lightbox>
• tested on netlify server as a static generated site
• https://github.com/pexea12/vue-image-lightbox/issues/31

Any help would be greatly appreciated, thanks!

I have a list of documents and inside each document I have an array of images. When I use lightbox and pass images, only the images of the first document gets updated.

Hi,

can you adjust babel so this lib produces ES5 compatible build? This is a nice lib but cannot be used when an app needs to support IE11.

Thanks, Ondrej.

hey,
am really like the package , just need help how using method closeLightBox ?

<lightbox alt="" class="mw-100 w-auto" v-if="data.image" :images="[data.image.full]" ></lightbox>

When doing a npm run build the following error occurs:

ERROR in static/js/vendor.87839b9db02403d7ae6a.js from UglifyJs
Unexpected token: name (s) [./~/vue-image-lightbox/dist/vue-image-lightbox.min.js:1,26466][static/js/vendor.87839b9db02403d7ae6a.js:88596,26426]

If i try the demo everything works as expected, but if i try to use the option showLightBox= false, whenever i click a thumbnail i'm getting the message: "Uncaught TypeError: Cannot set property 'showLightBox' of undefined".

I have bug after update 5.3.0:

Why script.js has "require('./style.css')"?

Not a bug or issue, but a question on usage (my apologizes in advance if this is not the right location to ask questions for vue-image-lightbox). I really want to use vue-image-lightbox. How to use 'require' to load .jpg images as needed by Vue.js?

For example (this will show images on page):

          <img
            v-lazy="require(`@/img/${image.src}`)"
            style="height: 100px"
            @click="openGallery(index)"
          >

However, when clicking on an image Lightbox comes up, but images are broken.

Question: How can 'require' be set for the .jpg images for/within <Lightbox...> (so when an images is clicked it will show as expected. Currently images are broken.)?

Thanks much for this tool, and your time.

hi there is no thumb image

This event would fire when the lightbox is closed.

Are there examples of how to work with the events this module provides?
Thank you!

How to:

• hide prev/next button when having only 1 image
• hide next button when seeing last image
• hide prev button when seeing first image

The effect is so good， but in my project has some problem,
I don`t know why
Can you show the demo source code

think u~

In vue-image-lightbox/dist/vue-image-lightbox in stopPropagation

{snip} .stopPropagation(),t.previousImage()},swipeleft:function(e){e.stopPropagation(),t.nextImage()}}},[s("div",{staticClass:"vue-lb-content"},[s( {snip}

Man I really wanted to love this package, and I was so close. Then I noticed that it's heavily dependent on vue-lazyload. Why? I'm using what I believe is a better lazy load lib (https://github.com/aFarkas/lazysizes) and I'm stuck with the decision on going with a different lightbox or having 2 lazy load libs.

This seems to be a decision I shouldn't have to make.

Can't your comp detect if lazy load is installed and do whatever it needs to?

Is there a way the thumbnail section can be responsive? I have seen a few other lightbox examples where depending on the screen size the number of thumbnails changes. Is there a way to do that with this package? or is it something I need to add my own custom CSS/Vue computed property for the nThumbs?

Thanks!

Is there any method to know when you change images?

would be nice to chose transition effects (most desirable slide in and out)

Can't figure out how to use your component if I need to show 2 more groups of images on the same page.
Thanx for any help

Getting an error in IE11 Expected ':'

Even if I installed vue-lazyload this error appears.
Thank you

Is there a way to use the footer while also not disabling the image counter?

Check gif below for issue:

Hello thanks for the package, already using it in one of my projects.
I do have a question however.

Is there a way to use this package with ssr/nuxt?
If so it would be awesome if the readme contained an example, if not is something that is going to be added?

I´ve implemented the lightbox and everything is working fine, except the thumbnails in the Lightbox don´t load....is this a known issue?
tx hanna

I set images according to the start guide, but the thumbnails image is empty, can you help me ?

Hi,

Tks for nice lightbox.
I wonder if you could provide sourcemap for js file?

need types support for typescript version....

How do I use the slots.

Currently trying like this, but it does not work:

      <light-box
        :images="lightBoxImages"
      >
        <template v-slot="close">
          <h2>TEST</h2>
        </template>
      </light-box>

siteLoading works for thumbles but not for main image.

As opposed to the demo, on my site I'm using different files for thumbnails / full size images. When I open the lightbox or click the next image, for a moment all that's displayed is a little box on the middle of the screen (while the image loads). Is it possible to avoid this?

As you can see, after the images are loaded everything works fine.

By using slots for the buttons and image position, it would allow for better customization and translation

Problem exist on Ipads only. Remote debugger shows next thing

This problem discovered on my project (latest build also used). Screen was taken from debugging your demo

If you initialize the lightbox <lightbox :images="imgs"></lightbox> where imgs = []
Then later you populate it, lets say via ajax. Then you do this.$refs.lightbox.showImage(0). It works, but breaks when you press the next / previous buttons.

You must destroy hammer created in mounted hook in beforeDestroy hook

One should be able to pinch-zoom the image.

I would like to contribute, but I need some infos about where to start or where to put this implementation.

Thanks for this great component. Would appreciate any pointers on how to use it with a youtube video.

Looking at the inspected code of the demo and the src it seems you aren't adding an alt tag to the images in the gallery.

It would be rad if the caption attr could translate to an alt tag.

I have this template and second thumbs don't change on images change.
The images change correctly but thumbs not work properly.

<template>
  <div>
        <div 
          v-for="(image, index) in products" 
          style="display: inline-block"
          :key="index"
        >
          <img 
            v-lazy="image.link" 
            style="height: 100px" 
            @click="openGallery(index)"
          >
        </div>
      <LightBox 
        :images="images" 
        ref="lightbox"
        :show-thumbs="true"
        :show-light-box="false"
      >
      </LightBox>
    </div>

</template>

<script>
require('vue-image-lightbox/dist/vue-image-lightbox.min.css')
import LightBox from 'vue-image-lightbox'

export default {
  components: {
    LightBox,
  },
  created() {
    console.log('ene0')
  },
  data() {
    return {
      products: [
        { id: 1, link: '/image/1.jpg', images: [
            { id: 1, link: '/image/7.jpg'},
            { id: 2, link: '/image/2.jpg'},
            { id: 3, link: '/image/3.jpg'}
        ]},
        { id: 2, link: '/image/6.jpg', images: [
            { id: 4, link: '/image/4.jpg'},
            { id: 5, link: '/image/5.jpg'},
            { id: 6, link: '/image/6.jpg'}
        ]}
      ],
      images: []
    }
  },
   methods: {
    openGallery(index) {
      this.images = []
      for (let i = 0; i < this.products[index].images.length; i++){
        this.images.push({
          src: this.products[index].images[i].link,
          thumb: this.products[index].images[i].link
        })
      }
      console.log(this.images)
      this.$refs.lightbox.showImage(0)
    }
  }
}
</script>