Skip to content
🌌 A slick, yet tiny lightbox gallery for Vue.js
Vue JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
build Simplify build config Jan 16, 2020
dev Replace unpkg with jsDelivr in all places Jan 10, 2020
docs
src
.browserslistrc
.eslintignore
.eslintrc.js
.gitignore
.nvmrc
.travis.yml
CHANGELOG.md
LICENSE
README.md
package-lock.json
package.json

README.md

vue-tinybox

Milky Way emoji

A slick, yet tiny lightbox gallery for Vue.js

  • Slick. No excessive design. Pictures, thumbnails, controls.
  • Tiny. Dependency-free. Less than 3 KB minified and gzipped.
  • Adaptive. Works on computers. Works on tablets. Works on phones.

Demo

Observe the live demo at https://os.karamoff.dev/vue-tinybox

Basic usage

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

Install

Browsers

  1. Include the link to Tinybox in <head> alongside Vue.js:

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

    You can of course use jsDelivr instead of unpkg.

  2. Tinybox will auto-install upon detecting the global Vue instance. You can use it right away.

Node environment

  1. Install the Tinybox package:

    npm install vue-tinybox
    # or
    yarn add vue-tinybox
  2. Register it as you usually would:

    import Tinybox from "vue-tinybox";
    // or
    const Tinybox = require('vue-tinybox');
    
    
    Vue.component('Tinybox', Tinybox);
    //or
    Vue.use(Tinybox);
    //or
    new Vue({
        components: { Tinybox },
        // ... 
    });

API

Image object

An Image object is an object with following fields:

Field name Type Description
src String The image URL
alt String (optional) the alt text
thumbnail String (optional) The thumbnail (a smaller, square version of the image) URL

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

You can use v-model on a Number variable, which will hold the index of the image currently open. If no image is open (i.e. Tinybox is closed), the value becomes 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}"
/>

Browser support

Chrome Firefox Safari MS Edge Internet Explorer
21+ 28+ 7+ 16+ 11
You can’t perform that action at this time.