sky-lightbox v0.1.0

SkyLightbox - a flexible lightbox plugin for Vue.js 2, build on v-img

!important

This module only provides a complete barebone ligthbox setup/display, thus encouraging you to make your own lightbox display with the module's provided functionality. The reason for this is to allow full author flexibility across multiple projects and to keep the bundle size to a minimum and not become biased towards the design/content of a lightbox overlay.

Getting started

Quick start

In order to make the plugin work we need to download necessary dependencies.

yarn add sky-lightbox

Next thing to do is adding the plugin to the Vue. Shown with dummy ligthbox componenet setup.

// Setup your preferred lightbox overlay component.
import { SkyLightboxMixin } from 'sky-lightbox';

export default {
    name: 'LigthboxComponent',
    mixins: [SkyLightboxMixin],
    mounted() {
        console.log('Custom lightbox component loaded');
    },
};

// Import Vue, sky-lightbox and custom lightbox component
import Vue from 'vue'
import SkyLightbox from 'sky-lightbox'

import LigthboxComponent from './LigthboxComponent.vue';

// Loading the plugin into the Vue.
Vue.use(SkyLightbox, { lightbox: LigthboxComponent });

Configurations

Snippet with default settings;

const config = {
  // Use `alt` attribute as gallery slide title
  altAsTitle: false,
  // Event listener to open gallery will be applied to <img> element
  openOn: 'click',
  // Component to use as lightbox overlay instead of provided compoenent
  lightbox: SkyLightbox, // Internal component name.
}

Vue.use(SkyLightbox, config);

Usage

Basic example

Simple initialization to lightbox a single image

<img
    v-sky-lightbox
    src="image.png"
>

OR

<img
    v-sky-lightbox="{
        src: 'image.png',
    }"
    src="image.png"
>

Group images in lightbox slider example

Simple initialization to lightbox an image which is part of a gallery / group.

<img
    v-sky-lightbox:group-name
    src="image.png"
>

OR

<img
    v-sky-lightbox="{
        src: 'image.png',
        group: 'group-name',
    }"
    src="image.png"
>

The Lightbox Component

When v-sky-lightbox is used, the set lightbox component will be added to the bottom of the page. No matter how many groups are made, only one component will be made and reused for all galleries. This means that you cannot nest a lightbox inside a lightbox easily.

Plugin

v-sky-lightbox

Single source of input for enabling lightbox overlay for a given image.

Inline directive settings

• Any of these options except opened, closed, changed functions and openOn property could be changed at runtime.

Component / Mixin

As this module is only a barebone setup, it only has a few vital pieces of data and methods to be used for the basic functionality of the lightbox. However, the module also supplies behind-the-scenes functionality for normal use cases.

Functionality

Data

Note that this data is available to you, but not necessarily something you always want to use. The visibleUI variable, for example, can be used to hide and show the UI based on mouse movement, but you may also simply not use it, and have the UI always visble, or make your own system for extended functionality.

Methods

Todo

• Add data clearance delay to closing