Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: 1 day ago
JSON representation

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

Host: GitHub
URL: https://github.com/dczajkowski/vue-pure-lightbox
Owner: DCzajkowski
License: mit
Created: 2017-07-29T13:25:37.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2022-10-12T12:28:06.000Z (about 2 years ago)
Last Synced: 2024-04-12T18:15:59.114Z (7 months ago)
Topics: gallery, gallery-plugin, hacktoberfest, javascript, js, lightbox, lightbox-gallery, lightbox-gallery-plugin, vue, vuejs, vuejs2
Language: Vue
Homepage: https://codepen.io/DCzajkowski/pen/rzOErW
Size: 460 KB
Stars: 160
Watchers: 4
Forks: 26
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

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

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