pexea12 / vue-image-lightbox Goto Github PK

View Code? Open in Web Editor NEW

346.0 9.0 80.0 2.44 MB

A Vue component to display an image gallery lightbox

HTML 1.35% Vue 51.99% JavaScript 29.01% CSS 17.66%

vue vue-components vue-image-lightbox lightbox image-gallery

vue-image-lightbox's Introduction

vue-image-lightbox

A simple image/video lightbox component for Vuejs NPM Package

I use CSS style from react-images

Demo!

Development (NPM / Yarn)

npm run dev
yarn dev

Install

NPM / Yarn

Install the package:

npm install vue-image-lightbox vue-lazyload
yarn add vue-image-lightbox vue-lazyload

Then import it in your project At your entry point (main.js normally)

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
...
Vue.use(VueLazyLoad)

and use the lightbox:

import LightBox from 'vue-image-lightbox'

export default {
  components: {
    LightBox,
  },
}

Browser global

<script src="path/to/vue.js"></script>
<script src="path/to/dist/vue-image-lightbox.js"></script>

Usage

You can simply view App.vue to see how to use vue-image-lightbox

Import CSS style

require('vue-image-lightbox/dist/vue-image-lightbox.min.css')
// Use only when you are using Webpack

How to use:

<light-box :media="media"></light-box>

media has the structure:

[
  { // For image
    thumb: 'http://example.com/thumb.jpg',
    src: 'http://example.com/image.jpg',
    caption: 'caption to display. receive <html> <b>tag</b>', // Optional
    srcset: '...' // Optional for displaying responsive images
  },
  { // For video
    thumb: 'https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg',
    sources: [
      {
        src: 'https://www.w3schools.com/html/mov_bbb.mp4',
        type: 'video/mp4'
      }
    ],
    type: "video",
    caption: '<h4>Monsters Inc.</h4>',
    width: 800, // required
    height: 600, // required
    autoplay: true //Optional to autoplay video when lightbox opens
  }
]

Options

Properties

name	type	default	description
media	Array	required	Media array to display
showLightBox	Boolean	true	Whether to show lightbox or not at the beginning
startAt	Number	0	Index of the image that you want to start at
nThumbs	Number	7	Number of thumbnail images
showThumbs	Boolean	true	Whether to show thumbnails or not
autoPlay	Boolean	false	Move to next image automatically
autoPlayTime	Number	3000 (ms)	Time to stop at an image before move on to next image
siteLoading		String	default image when your image is error or loading
showCaption	Boolean	false	Whether to show caption or not
disableScroll	Boolean	true	set to `true` to avoid scrolling views behind lightbox
disableZoom	Boolean	true	set to `true` to avoid zooming lightbox
lengthToLoadMore	Number	0	Minimum length unto end to emit load more event
closable	Boolean	true	Display the close button at the right top corner or not. ESC clicking-close will also be disabled if closable is set to false.
closeText	String	Close (Esc)	Text for the close button
previousText	String	Previous	Text for the previous image button
nextText	String	Next	Text for the next image button
previousThumbText	String	Previous	Text for the previous thumb image button
nextThumbText	String	Next	Text for the next thumb image button
showFooterCount	Boolean	true	Show footer count

Methods

name	arguments	description
nextImage	()	Move to next image
previousImage	()	Move to previous image
closeLightBox	()	Close lightbox
showImage	(index)	Show the image at index

Slots

close

The content of the close button.

footer

The content of the footer under the image.

slot-scopes

name	type	description
current	integer	Number of the current image displayed
total	integer	Numbers of the images

The previous button on the main image.

The next button on the main image.

previousThumb

The previous button on the thumbs list.

nextThumb

The next button on the thumbs list.

customCaption

The caption of the current image.

videoIcon

The Icon used for videos

Events

onOpened: emit when the lightbox is opened.
onClosed: emit when the lightbox is closed.
onLastIndex: Emit when the current image is the last one of the list.
onFirstIndex: Emit when the current image is the first one of the list.
onStartIndex: Emit when the current image is at the startAt index (specified in the properties).
onLoad: Emit when there are lengthToLoadMore images left in the array (specified in the properties). For example, if lengthToLoadMore = 2 and there are 7 images in your array, when you reach index 4 (which means there are 2 images left which are not discovered yet), this event will be emitted. After that, if the image array are updated and there are totally 15 images, the event will be emitted at index 12.
onImageChanged: Emit when the image is changed.

CREDITS

Most of the CSS belongs to react-images

Contributors:

@imcvampire
@krystalcampioni
@jstr14
@PedroBatista333
@vtalbot
@hasangilak
@neobutter
@mudin
@asterisx
@janosrusiczki janosrusiczki) janosrusiczki]

vue-image-lightbox's People

Contributors

Stargazers

Watchers

Forkers

krystalcampioni pawelmadeja gemorroj as1968042 vietquocnguyen panyixi wooodhead yangchunjian taehyunhan trendingtechnology iam-raihan wawlik johfermq likecoin matewiszt blueflylin cyb- jstr14 guozhengmao riveraeu nfwyst phbdemorais seanhu0 smb043 silvandiepen stepchik myvips vtalbot risha700 lisovenkonastya anwarelbo anthonymartinovic guan mudin djvov zengde sadortun mldmoritz caothetoan smirnovmaxim peterzero basuneko noahbare passer-by-x neobutter hasangilak jgui1129 pjvanwijk matrixy isense-development nirikshan asterisx cyhsu1989 anas-shamia sammndhr khoamac carlos-ribeiro-cedro felipedgarcia realanmup phbit dinlyhor sdnd2000 bottlehs ashrafali46 hysios izshreyansh haweecodes titoine caraseli02 takumi-n rowathy dhaxor saylorman khueankaew228 fish-liu cuti27 purposefuleagle andreanz22 leksandre

vue-image-lightbox's Issues

no lightBoxOn event !

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.

Animation effects

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

Next/Prev buttons don't work when initialized with an empty array

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.

Can't work in IE

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

.vue-lb-container z-index value is different between dev and build

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.

Accessibility for images

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.

Mem leak

You must destroy hammer created in mounted hook in beforeDestroy hook

SSR options

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?

Remove vue-lazyload as a dependancy

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?

Responsive Thumbnail Section?

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!

Add ability to zoom

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.

Lightbox not updating when working with multiple array of images

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.

Avoid flicker when loading full size images

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.

Can't close lightbox when click outside

Missing sourcemap???

Hi,

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

Onchange?

Is there any method to know when you change images?

Not working on Ipad

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

Build fails

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]

ES5 build

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.

Main image doesn't have `siteLoading`

siteLoading works for thumbles but not for main image.

Demo with showLightBox= false option is giving "Uncaught TypeError: Cannot set property 'showLightBox' of undefined"

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".

Lightbox thumbnails not displaying at all

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

Can you show the demo source code

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~

缩略图不显示, z-index 有问题

hi there is no thumb image

How to hide previous/next buttons when i have only 1 image ?

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

This component can't run in IE

It will throw the SyntaxError: lack of ":"

Does not show a large image

I have bug after update 5.3.0:

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

The thumbnails are not displayed

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

Failed to mount component

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

closeLightBox methods

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>

Is it possible to display a you-tube video with this?

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

Could you add onClose event?

This event would fire when the lightbox is closed.

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

Nuxt Page refresh

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!

IE11 Issue

Getting an error in IE11 Expected ':'

showImage will scroll the page to the top

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?

displayThumbs problem

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

TS support

need types support for typescript version....

Lazy Load Large (src) image Only when Gallery Opened / thumbs clicked?

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.

More then one gallery on the same page?

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

TypeError: undefined is not an object (evaluating 't.addEventListener')

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! :)

Using footer slot removes image count box

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

Check gif below for issue:

Add new zoom functionality

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

How to load images using require (as needed by vue.js)

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.

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

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

How to use slots?

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>