Good looking lightbox gallery with Vue tinybox

If you working with images, one of the things you might want to have, is a lightbox gallery. This library would help you display images in a simple manner. For this purpose, there comes a Vue tinybox library component.

Documentation Check on GitHub

Lightbox gallery library features

A few features that the tinybox library will make a great fit for your project:

Slick. No excessive design. Pictures, thumbnails, controls. Just the core functionality, that’s all you need.
Tiny. Dependency-free. 3 KB minified and gzipped. As the library is so lightweight, it will not affect the performance of your application
Adaptive. Works on computers. Works on tablets. Works on phones. As nowadays there are many different types of devices, this is a great advantage.

Usage

Using the component is very simple. You can use this code snippet as an example for implementing the TinyBox.

<Tinybox
    v-model="index"
    :images="images"
    loop
    no-thumbs
/>

Below there are some of the component features you might find useful.

Image object field names:

Field name	Type	Description
`src`	`String`	Image URL
`thumbnail`	`String`	(optional) Thumbnail URL. If omitted, the image URL will be used
`caption`	`String`	(optional) Caption text to be overlayed on the image
`alt`	`String`	(optional) Alt text. If omitted, the caption will be used

Props:

Prop name	Type	Default	Description
`images`	`Array`	`[]`	List of either image URLs or `Image` objects
`loop`	`Boolean`	`false`	Indicates whether the images should loop
`no-thumbs`	`Boolean`	`false`	When enabled, the thumbnails are hidden

v-model

For the Number variable, you can use the v-model. Benefit of v-model is that it will hold the index of the image that is open at the time. However, If there is no image is open (for example. Tinybox is closed), the value will be null.

Instead of v-model you can use the index prop and change event:

<Tinybox
    v-model="index"
    :images="images"
/>

<!-- is equivalent to -->

<Tinybox
    :images="images"
    :index="index"
    @change="(i) => {index = i}"
/>

Events:

Event name	Payload	Description
`change`	index of the image changed to	Is emitted on any image change (thumbnail navigation, prev/next, close)
`prev`/`next`	index of the image changed to	Is emitted specifically when the user clicks “Prev”/”Next” or presses Left/Right arrow key
`close`	index of the image Tinybox was closed at	Is emitted specifically when the user clicks “Close” or presses the Esc key

A few examples how you can use the events:

<Tinybox
    :images="images"
    v-model="index"
    @change="onChange"
    @prev="onPrevious"
    @next="onNext"
    @close="onClose"
/>

After you’ve described the TinyBox component, you can export the methods that will make it interactive:

export default {
    // ...
    methods: {
        onChange(index) {
            console.log("User navigated to the photo: ", index);
        },
        onPrevious(index) {
            console.log("User clicked 'previous' to switch to: ", index);
        },
        onNext(index) {
            console.log("User clicked 'previous' to switch to: ", index);
        },
        onClose(index) {
            console.log("User closed TinyBox on this photo: ", index);
        }
    },
}

How to install Vue tinybox

Just like with any other Vue component, you can use npm to install it:

npm install vue-tinybox

Alternatively, you might use the Yarn manager:

yarn add vue-tinybox

If you do not want to install an additional package, you can simply include the library in the <head> element of your HTML document. When you will load the page, Vue tinybox will be loaded from the external source:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tinybox"></script>