vue-easy-lightbox

A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

[email protected] only supports Vue.js 3, if you need Vue.js 2 version please check here.

Installation

Package managers

$ npm install --save vue-easy-lightbox@next
# OR
$ yarn add vue-easy-lightbox@next

Direct Download

Include the CDN link in the html file.

<script src="https://unpkg.com/vue@next">script>
<script src="https://unpkg.com/vue-easy-lightbox@next/dist/vue-easy-lightbox.umd.min.js">script>

Different Builds

ES5 build is converted by Babel. If you don't need to support an es5 environment, you can choose a nonES5 build with smaller size.

	ES5(default in package.json)	ES6
UMD(for browsers)	vue-easy-lightbox.es5.umd.min.js	vue-easy-lightbox.umd.min.js
CommonJS	vue-easy-lightbox.es5.common.min.js (pkg.main)	vue-easy-lightbox.common.min.js
ES Module(for bundlers)	vue-easy-lightbox.es5.esm.min.js (pkg.module)	vue-easy-lightbox.esm.min.js

Usage

Direct





Comments













CSP Violation






This package is inlining css, which violates my CSP rules (default-src 'self'). I know I can enable unsafe-inline but this is unsafe and kinda defeats the purpose.
Is it possible to bundle this package in some other way?



opened by sheremet-va  9














Toolbar Methods




Hi, in the documentation regarding custom toolbar you mention:
<template v-slot:toolbar="{ toolbarMethods }">
    <button @click="toolbarMethods.zoomIn">zoom in</button>
    <button @click="toolbarMethods.zoomOut">zoom out</button>
    <button @click="toolbarMethods.rotateLeft">Anticlockwise rotation</button>
    <button @click="toolbarMethods.rotateRight">clockwise rotation</button>
  </template>


The question that I'm having is, where should the toolbarMethods come from?
Can I import the default implementation somehow, and just configure the visuals?
Can you provide an example of how this should be used?



opened by Drabuna  7














TODO





[x] Custom toolbar/btns/ options #5
[x] Description text #9
[x] Rewrite class name
[ ] New document ( vuePress ?)
[x] Mobile support #4
[x] Minimize bundle size #12
[x] Provide es5 / es6+ #12
[x] Img loading.
[x] escape pressing
[x] TypeScript support
[x] Rewrite to TypeScript
[x] Minize TypeScript build size (with babel)
[ ] Customize Styles support
[x] Error handler
[ ] Refactor with tsx
[x] btn click event & index change event




opened by XiongAmao  7














RTL not work correctly




Hi, I'm using this package with vue3 but I have a problem with something. When I click on the previous icon, the next image is displayed to me and vice versa.
This also happens for the key left and key right.



opened by sajjad5221  6














Lightbox is not Working with Bootstrap




I'm not sure why it's not working with Bootstrap.
When I remove import ('Bootstrap.css) its working fine while my custom stylesheet still there.
Any help would be much appreciated
Thanks



opened by MuhaddiMu  6














Direct script Include error - Failed to mount app: mount target selector "#root" returned null.




I paste the in script example in a html file (see below code), but it returns the error: Failed to mount app: mount target selector "#root" returned null.
So I guess I should create a #root element in the DOM, and add <div id="root"></div> in the html, but it return another error: Uncaught TypeError: dataOptions.call is not a function
Could you help! Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- in html -->
    <div id="root"></div>
<div id="app">
    <div class="">
      <div
        v-for="(src, index) in imgs"
        :key="index"
        class="pic"
        @click="() => showImg(index)"
      >
        <img :src="src" />
      </div>
    </div>
    <vue-easy-lightbox
      :visible="visible"
      :imgs="imgs"
      :index="index"
      @hide="handleHide"
    ></vue-easy-lightbox>
  </div>
  
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/vue-easy-lightbox@next/dist/vue-easy-lightbox.umd.min.js"></script>
  <script>
    // Note: The Global Vue Constructor is no longer available in Vue 3.0.
    // https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp
    var app = Vue.createApp({
      el: '#app',
      data: {
        visible: false,
        index: 0, // default: 0
        imgs: [
          'https://via.placeholder.com/450.png/',
          'https://via.placeholder.com/300.png/',
          'https://via.placeholder.com/150.png/',
          { src: 'https://via.placeholder.com/450.png/', title: 'this is title' }
        ]
      },
      methods: {
        showImg(index) {
          this.index = index
          this.visible = true
        },
        handleHide() {
          this.visible = false
        }
      }
    })
    // Registering VueEasyLightbox for your VueApp.
    app.use(VueEasyLightbox)
      
    app.mount('#root')
  </script>
</body>
</html>




opened by liangwuweb  4














Feat: Add swipe support, option to disable scrolling and loop next/previous




Feature request: Support swipe #63
Here are some new features I added to my fork:

Add ability to swipe left/right on desktop and mobile
Add option to disable scrolling when modal is visible
Allow user to navigate from beginning to end and vice versa
Rename the on-prev-click/on-next-click events to on-prev/on-next

Remaining work:

Update changelog with new features/properties
Bump minor version since the events were renamed
Update docs and other language READMEs

Any feedback?



opened by kevinsimard  4














How to show images in center of screen?




I have many images in block
When I click one of images, an image doesn't shows in center of screen
I need an image to be sxactly in center of screen vertically even If I scroll page to bottom and clikc on last image.
How to show images in center of screen?
Is there something that I can change with CSS?
<div class="works">
      <div
        class="image"
        v-for="(image, index) in images"
        :key="index"
        @click="showSingleImage(index)"
      >
        <img :src="image" :alt="index"/>
      </div>
    </div>
    <client-only>
      <vue-easy-lightbox
        :visible="visible"
        :index="index"
        :imgs="images"
        @hide="visible = false"
      />
    </client-only>

Video



opened by kentforth  4














The picture is blurry.





The top image is an easy-lightbox image.
The image below is when the same picture is opened directly
This is the image you see.
Why does the image in the lightbox look blurry?
All sizes are 100%.



opened by k3341095  4














How can I handle onerror Img?




I got Img from Api but I don't know the Img can correct show or can't.
How can I handle onerror Img ?
The issue like this :
https://imgur.com/a/195ETZp

Thx EveryOne.
feature request 



opened by RexHung0302  4














overflow-y of body is not removed on lightbox close




I'm using the version for Vue2. When closing the lightbox via ESC, close button or mask the body element stil has overflow-y: hidden set.
Currently I'm using a workaround to fix this.
Also index isn't reactive. I have to use @on-index-change to update current index variable.
<template>
    <vue-easy-lightbox
        moveDisabled
        scrollDisabled
        :visible="show"
        :imgs="images"
        :index="currentIndex"
        @on-index-change="onIndexChange"
        @on-error="close"
        @hide="close"
    >
        <template #toolbar>
            <span></span>
        </template>
    </vue-easy-lightbox>
<template>

<script>
import VueEasyLightbox from 'vue-easy-lightbox'

export default {
    components: { VueEasyLightbox },

    data: () => ({ currentIndex: 0, show: false }),

    mounted () {
        setTimeout(() => {
            // Timeout in order to load the first image
            this.show = true
        }, 2000)
    },

    computed: {
        images () {
            return this.$store.getters.images
        },
    },

    methods: {
        close () {
            document.querySelector('body').style['overflow-y'] = 'visible'
        },

        onIndexChange (oldIndex, newIndex) {
            this.currentIndex = newIndex
        },
    },
}
</script>

bug question 



opened by NickHatBoecker  3














Buttons next and last image with multi image not align using vue 3 ts




Why?
Install Vue3 and vue-easy-lightbox@next

And using "hello world" using type option and composition api

The buttons are not align as live demo.

As the above image show, the next and last button are on the up side of the view.
npm init vue@latest // "vue": "^3.2.45",
+

Code: https://onycat.com/vue-easy-lightbox/guide/#basic-usage-in-sfc



opened by skatesham  3














v2.0 dev




TODO:

[ ] update gesture behaviours

[ ] limit image movement range
[ ] support swipe to change image index without conflict with other gestures


[ ] lazy load
[ ] thumbnail
[ ] toolbar custom

[ ] slots ? render function ?


[ ] iframe?




opened by XiongAmao  0














Feature request - zooming behaviours




Hello,
usually we want to swipe to get to previous or next image. (:moveDisabled="true").
But if we are zoomed in, so that parts of the image are not visible, we want to get to them by repositioning the image with cursor or swiping. (:moveDisabled='false').
We could achieve this by also emitting zoom changes and current zoom scale.
Greetings
feature request 



opened by mplanitzer  0














Feature Request - Double click to enlarge, and pinch to zoom




Hi,
I like this lightbox component a lot! But I am missing two features: 1) A doubleclick or doubletap on the current image should adjust the image to fill the screen or should zoom in all the way 2) Pinch to zoom on touch devices is currently not working.
Since the component does not expose the image-domelement, I can't find a way to implement this feature in my own project.
Kind regards
bug 



opened by theoreticalsampling  1









Releases(v1.8.1)







v1.8.1(Aug 29, 2022)




Fix(composables): show() accept wrong param when use in vue template. #104

Source code(tar.gz)
Source code(zip)










v1.7.1(Jul 26, 2022)




Fix: The default parameters of useEasyLightbox() is missing.

Source code(tar.gz)
Source code(zip)










v1.7.0(Jul 18, 2022)




Feat: Add composable useEasyLightbox() for setup().

Source code(tar.gz)
Source code(zip)










v1.6.0(Jul 15, 2022)





Breaking Change: ES5 bundles is removed.


Feat: Add some A11y attrs.


Feat(type): Add emits type declaration.


Source code(tar.gz)
Source code(zip)










v1.5.0(Jul 5, 2022)




Feat: Enable or disable click mask to close vue-easy-lightbox.

Source code(tar.gz)
Source code(zip)










v0.18.0(Jul 5, 2022)



Feat: Enable or disable click mask to close vue-easy-lightbox.
Source code(tar.gz)
Source code(zip)










v1.4.1(Mar 7, 2022)




Feat: Reduced zoom in/out ratio.
Feat: Zooming by mouse wheel is available only when scrollDisabled is true.
Breaking Change: scrollDisabled now defaults to true.

Source code(tar.gz)
Source code(zip)










v1.4.0(Mar 7, 2022)




Feat: Support zoom by mouse wheel.
Feat: Support double click to enlarge img.

Source code(tar.gz)
Source code(zip)










v0.17.0(Mar 7, 2022)



[email protected](Vue.js 3) is now the new default version, check here.
[email protected] only supports Vue.js 2.
Change:

Feat: Add scrollDisabled(default: true) prop to disable scrolling when modal is visible.
Feat: Support zoom by mouse wheel, only available when scrollDisabled is true.
Feat: Support double click to enlarge img.

Source code(tar.gz)
Source code(zip)










v1.3.0(Feb 3, 2022)




Feat: Support RTL (right to left) languages.

Source code(tar.gz)
Source code(zip)










v1.2.4(Sep 18, 2021)



Fix: Firefox Dragging issues #81
Source code(tar.gz)
Source code(zip)










v1.2.3(Aug 17, 2021)



[1.2.3] (17 August 2021)

Feat: Make vue-devtool display named components.
Fix: Can't get toolbarMethods from slot props.

[1.2.2] (17 August 2021)

Feat: Extract css.

[1.2.1] (16 June 2021)

Fix: Detect window incorrect on server side.

Source code(tar.gz)
Source code(zip)










v0.16.0(May 23, 2021)




Feat: Add loop prop to enable loop switching of image
Feat: on-prev-click/on-next-click is renamed to on-prev/ on-next, the old event name is kept and you can still use it.

Source code(tar.gz)
Source code(zip)










v1.2.0(May 16, 2021)




Feat: Add loop prop to enable loop switching of image.
Feat: Add scrollDisabled prop to disable scrolling when modal is visible.
Feat: When moveDisabled is set to true, it is possible to switch images by swiping.
Feat: Add swipeTolerance prop for swipe distance detection.
Feat: on-prev-click/on-next-click is renamed to on-prev/ on-next, the old event name is kept and you can still use it.

Source code(tar.gz)
Source code(zip)










v1.1.0(Apr 11, 2021)



Feat:

Provides a new prop teleport to solve css style problems in some cases. teleport allows you to customize the mount node. teleport docs here.

Source code(tar.gz)
Source code(zip)










v1.0.0(Apr 9, 2021)




Docs: update.
Feat: New animation throttling.
Feat: d.ts for .tsx.
Feat: Small size.
Fix: css class typos.
Fix: Touch event handler error may occur in some cases.
Fix: Scroll chaining when touchmove.
Fix: #54 Img may be blurred in some cases.

Source code(tar.gz)
Source code(zip)










v0.15.2(Apr 9, 2021)




Docs: Update.
Fix: Component name typos.
Fix: Touch event handler error may occur in some cases.
Fix: #54 Img may be blurred in some cases.
Fix: Scroll chaining when touchmove.
Fix: mouse-drag / touchmove animation ends incorrectly.

Source code(tar.gz)
Source code(zip)










v1.0.0-rc.3(Dec 21, 2020)



Feature:

Support Vue.js 3.0!
Compatible d.ts file!

Source code(tar.gz)
Source code(zip)










v0.14.0(Jul 10, 2020)




Fix: Syntax error on IE11.

Source code(tar.gz)
Source code(zip)










v0.13.0(May 15, 2020)




Fix: Error 'src' of undefined thrown when show VueEasyLightbox.

Source code(tar.gz)
Source code(zip)










v0.12.1(May 6, 2020)




Fix: Add style prefixes to fix error on firefox.

Source code(tar.gz)
Source code(zip)










v0.12.0(May 5, 2020)




Fix: style error on firfox mobile

Source code(tar.gz)
Source code(zip)










v0.11.0(Mar 27, 2020)



Feature:

Emit events when click prev/next btn or change index.

Source code(tar.gz)
Source code(zip)










v0.10.3(Feb 28, 2020)




Fix: revert 'ArrowLeft' 'ArrowRight' key handler.

Source code(tar.gz)
Source code(zip)










v0.10.2(Feb 14, 2020)



Feature:

Add keyboard left or right event handler for switching images.
Add mobile device gesture to zoom or move image.
Add image description.
New toolbar style.

Source code(tar.gz)
Source code(zip)










v0.9.2(Feb 10, 2020)




Fix drag animation slow.

Source code(tar.gz)
Source code(zip)










v0.9.1(Jan 28, 2020)




Fix peerDependencies lock.

Source code(tar.gz)
Source code(zip)










v0.9.0(Dec 23, 2019)




Add vetur support.

Source code(tar.gz)
Source code(zip)










v0.8.1(Nov 22, 2019)



BugFix

Fix images does not load if they are the same url. #26

Source code(tar.gz)
Source code(zip)










v0.8.0(Nov 12, 2019)




Add loading & onerror placeholders.
New Slot: loading & onerror for custom loading or error placeholders.
New Event: on-error , image onerror event triggers.

Source code(tar.gz)
Source code(zip)