Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/DCzajkowski/vue-pure-lightbox

Very simple lightbox plugin (without any dependencies) for Vuejs 🌅
https://github.com/DCzajkowski/vue-pure-lightbox

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

Last synced: about 2 months ago
JSON representation

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

Lists

README 

        
# Pure JS lightbox component for Vue.js

Downloads

Version

License



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



## Table of contents

* [Demo](#demo)

* [Installation](#installation)

  * [With NPM](#with-npm)

  * [With a CDN](#with-a-cdn)

* [Usage](#usage)

  * [With an ES6 bundler (via NPM)](#with-an-es6-bundler-via-npm)

    * [Importing a component](#importing-a-component)

    * [Importing CSS styles](#importing-css-styles)

      * [Via an import](#via-an-import)

      * [Via a <style> tag](#via-a-style-tag)

  * [With a CDN](#with-a-cdn)

  * [Simple example](#simple-example)

  * [Example using content slot and custom loader](#example-using-content-slot-and-custom-loader)

  * [Available props](#available-props)

  * [Available slots](#available-slots)

* [Contents](#contents)

* [License](#license)

* [Issues](#issues)



## Demo

The live demo is available here: [https://codepen.io/DCzajkowski/pen/rzOErW](https://codepen.io/DCzajkowski/pen/rzOErW).



## Installation

### With NPM:

```bash

npm i vue-pure-lightbox --save

```



### With a CDN:

```html



```



## Usage

### With an ES6 bundler (via NPM)



#### Importing a component

```js

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

```js

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

```



##### Via a <style> tag

```vue



```



### With a CDN

```html



  new Vue({

    components: {

      'vue-pure-lightbox': window.VuePureLightbox,

    }

  }).$mount('#app')



```



---



### Simple example



```vue



```



> **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. `` instead of ``.



### Example using content slot and custom loader



```vue



  Loading…

  

    

  



```



> **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. `` instead of ``.



---



### 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                    | × (&times;)                     |

| icon-previous | Icon to be used as the "next" arrow button           | ![](https://i.imgur.com/HcdxJmd.png)(svg) |

| icon-next     | Icon to be used as the "previous" arrow button       | ![](https://i.imgur.com/oErSVk3.png)(svg) |

| preview       | DOM to be used in place of the default thumbnail     | Clickable link with a thumbnail           |



## Contents

This package consists of just one `.vue` file. It is meant to be as small and simple as possible.

In return you get a `` 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](https://github.com/DCzajkowski/vue-pure-lightbox/blob/3.0.0/LICENSE)



## Issues

If you find any bug or problem with the plugin please open an issue or create a pull request on the [Github repo](https://github.com/DCzajkowski/vue-pure-lightbox).