Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

github.com/dczajkowski/vue-pure-lightbox

Package Overview

Dependencies

Alerts

File Explorer

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/dczajkowski/vue-pure-lightbox

v0.0.0-20221012122804-243b11fd8822
Source
Go

Version published: 2 years ago

Created: 4 years ago

Source

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

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.

FAQs

What is github.com/dczajkowski/vue-pure-lightbox?

Package last updated on 12 Oct 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

github.com/dczajkowski/vue-pure-lightbox

Disclaimer

Table of contents

Demo

Installation

With NPM:

With a CDN:

Usage

With an ES6 bundler (via NPM)

Importing a component

Importing CSS styles

Via an import

Via a <style> tag

With a CDN

Simple example

Example using content slot and custom loader

Available props:

Available slots:

Contents

License

Issues

Related posts

github.com/dczajkowski/vue-pure-lightbox

Pure JS lightbox component for Vue.js

Disclaimer

Table of contents

Demo

Installation

With NPM:

With a CDN:

Usage

With an ES6 bundler (via NPM)

Importing a component

Importing CSS styles

Via an import

Via a <style> tag

With a CDN

Simple example

Example using content slot and custom loader

Available props:

Available slots:

Contents

License

Issues

Related posts

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft

Weekly Downloads Now Available in npm Package Search Results