dczajkowski / vue-pure-lightbox Goto Github PK

View Code? Open in Web Editor NEW

161.0 4.0 26.0 471 KB

Very simple lightbox plugin (without any dependencies) for Vuejs 🌅

Home Page: https://codepen.io/DCzajkowski/pen/rzOErW

License: MIT License

HTML 2.65% Vue 94.66% JavaScript 2.70%

vuejs vue vuejs2 js javascript lightbox gallery lightbox-gallery-plugin lightbox-gallery gallery-plugin

vue-pure-lightbox's Introduction

Pure JS lightbox component for Vue.js

Disclaimer

This package is not WCAG-compliant yet. It was created when the author was not aware of how important it is to be fully accessible. Proceed with caution.

Demo
Installation
- With NPM
- With a CDN
Usage
Contents
License
Issues

Demo

The live demo is available here: https://codepen.io/DCzajkowski/pen/rzOErW.

Installation

With NPM:

npm i vue-pure-lightbox --save

With a CDN:

<!-- In <head> -->
<meta rel="stylesheet" href="https://unpkg.com/vue-pure-lightbox/dist/VuePureLightbox.css">
<!-- In <body>, after Vue import -->
<script src="https://unpkg.com/vue-pure-lightbox/dist/VuePureLightbox.umd.min.js"></script>

Usage

With an ES6 bundler (via NPM)

Importing a component

import VuePureLightbox from 'vue-pure-lightbox'

/* @vue/component */
export default {
  components: {
    // ...
    VuePureLightbox,
  },
}

Importing CSS styles

If you are using an ES6 bundler, you will need to manually import the styles.

Via an import

import styles from 'vue-pure-lightbox/dist/VuePureLightbox.css'

Via a <style> tag

<style src="vue-pure-lightbox/dist/VuePureLightbox.css"></style>

With a CDN

<script>
  new Vue({
    components: {
      'vue-pure-lightbox': window.VuePureLightbox,
    }
  }).$mount('#app')
</script>

Simple example

<VuePureLightbox
  thumbnail="/path/to/thumbnail.jpg"
  :images="['/path/to/image1.jpg', '/path/to/image1.jpg']"
/>

Note: if you are not using a vue-loader (e.g. you are using a CDN), you have to use the kebab-case'ing for the component i.e. <vue-pure-lightbox> instead of <VuePureLightbox>.

Example using content slot and custom loader

<VuePureLightbox
  thumbnail="https://via.placeholder.com/350x150"
  :images="[
    { link: 'https://placekitten.com/1080/910', alt: 'Cat 1' },
    { link: 'https://placekitten.com/1080/920', alt: 'Cat 2' },
  ]"
>
  <template v-slot:loader>Loading…</template>
  <template v-slot:content="{ url: { link, alt } }">
    <img :src="link" :alt="alt">
  </template>
</VuePureLightbox>

Note: if you are not using a vue-loader (e.g. you are using a CDN), you have to use the kebab-case'ing for the component i.e. <vue-pure-lightbox> instead of <VuePureLightbox>.

Available props:

Prop	Type	Value
thumbnail	string	Path to a file being your thumbnail
images	string[] or array	Array of paths to files visible in the lightbox
alternate-text	string	(Optional) alt="" text for your image
value	boolean	(Optional) reactive visibility prop
open-at-index	integer	(Optional) index of an image to show when opening the modal

Available slots:

Slot	Description	Default
content	DOM to be used in place of an image in the lightbox	<img> tag with src set to path
loader	DOM to be used when there is an image loading	LightboxDefaultLoader
icon-close	Icon to be used as a close button	× (×)
icon-previous	Icon to be used as the "next" arrow button	(svg)
icon-next	Icon to be used as the "previous" arrow button	(svg)
preview	DOM to be used in place of the default thumbnail	Clickable link with a thumbnail

This package consists of just one .vue file. It is meant to be as small and simple as possible. In return you get a <VuePureLightbox> Vue component that allows you to show images in a nice, responsive lightbox.

Supported keys:

Arrow right - Go to the next image
Arrow left - Go to the previous image
Escape key - Close the modal
Arrow up, Arrow down and a Space Bar - inactive when the lightbox is visible

CSS is being used in the component, but each class is prefixed with a lightbox keyword. You can overwrite them as you wish.

License

MIT

Issues

If you find any bug or problem with the plugin please open an issue or create a pull request on the Github repo.

vue-pure-lightbox's People

Contributors

Stargazers

Watchers

vue-pure-lightbox's Issues

Image zoom

Is there any way I can zoom in on the image?

alternate-text alt tag only applied to thumbnail

Currently, there doesn't seem to be a great way to get an alt tag on the expanded lightbox image(s).

I understand that there is difficulty in that the expanded images are built from an array, but what if we made that array more complex so we could pass in src and alt for the expanded ligthbox image(s)?

Is there some way of doing this using the slot loader that I'm missing?

Remove event listener when component destroyed

If this component is mounted, destroyed and mounted again, it will register a second event listener. The first one should be removed when the component is destroyed.

Left/Right navigation arrows are missing when image is open

Feature Req: Ability to display lightbox without clicking the thumbnail

This component is neat! Kudos to the author

I could not find a feature to just display the lightbox UI without the thumbnail.
The idea is to invoke the lightbox programmatically

Not reactive

the image is not reactive after update from my update component and back to list component the image is still the same u need to refresh the page in order to take effect.

I think this is major issue

load youtube video too

It would be gread if we could load both youtube videos and images in the same lightbox...
any chance?
:)

API for dynamically changing images, and selecting first shown.

Attempting to implement this ( great ) component in a case where all the thumbnails are shown on the page already.

And the images shown changes ( the array is added to )
And when any of the thumbnails is clicked, the viewer starts on that one in the sequence of slideshow.

Any advice on how to implement it this way? Or should I submit a Pull Request with changes to the API which accommodate for dynamically handled images?

allow more thumbnails

Maybe adding a prop showAllThumbs, for displaying single/all thumbnails, would make a difference...at least for me :)
cao

Having trouble with the image paths

I'm trying to reference a local image, like so:

<lightbox
  thumbnail="../../assets/workspace.jpg"
  :images="['../../assets/workspace.jpg']"
></lightbox>

For some reason, the watcher is not taking those paths and replacing them with the actual image path. If I use that same path in an img tag, like this:

<img src="../../assets/workspace.jpg" alt="" />

Then it converts that into the real path which is: /static/img/workspace.4b36834.jpg.

Do I need to change anything to get this plugin to pick that up? Or does this only support external / CDN hosted images?

Thanks!

New release?

Could a new release be published to make available the preview slot merged in #34?

Thank you!

youtube video popup

How to use YouTube video popup with custom play button ?

Ability to use custom video's (MP4)

Hi!

Would it be possible (or maybe it is already?) to support self-hosted MP4's? I currently have my own video's and I don't want to upload them all to youtube.

Thanks!

Slots for previous, next and close buttons

I would like to use my own custom SVG elements for the control buttons inside the lightbox, instead of the icons that are provided from within this package. I have a PR ready, but it seems I cannot push to any new branch.

Loading indicator

Hi,

Thank you for your great work.

Do you have any plan for a simple loading indicator? When one click on next button there is no feedback for user so they try it again and again. Really confusing for slow connection. A simple loading indicator maybe helpful.

Thanks again!