Vuejs-Vue tinybox: vue-tinybox - a tiny (only 2.5 KB minzipped) and slick lightbox gallery. Optimized for both desktop and mobile.

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 here: 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>
  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 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

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

Comments

  • Add unit and e2e testing
    Add unit and e2e testing

    Dec 31, 2019

    In order not to do testing by hand (including what affects #2 and #13) a testing environment is needed. I propose using Jest for unit tests and Cypress for e2e tests.

    enhancement dev 
    Reply
  • Lazy load
    Lazy load

    Oct 8, 2020

    First, Thank you for this tiny little gallery - very simple and useful. Unfortunately didn't find any lazy load features.

    It would be nice to:

    • add some loader while image is loading
    • add some error stub if image can't be load
    enhancement 
    Reply
  • How to run only inside a container, not full screen?
    How to run only inside a container, not full screen?

    Oct 13, 2020

    The Question It's possible to show tinybox only inside a div ?

    Additional context I'm running in a admin template, with left sidebar, but tinybox stay below of the menu...

    question 
    Reply
  • Release 0.3.0
    Release 0.3.0

    Nov 14, 2019

    ? BREAKING

    • ".min.js" version is removed in favor of ".umd.js"

    Improved

    • package size went down ~170 bytes
    • build configs are more readable now
    • source code is more readable now
    Reply
  • Component import does not work in Nuxt.js
    Component import does not work in Nuxt.js

    Aug 23, 2019

    Even though the output file clearly says export default Tinybox;, Nuxt keeps telling me stuff like export 'default' (imported as 'Tinybox') was not found in 'vue-tinybox'.

    The component itself doesn't really work properly in an SSR-environment; gotta look into it.

    bug help wanted 
    Reply
  • Close (maybe others) event(s)
    Close (maybe others) event(s)

    Jul 3, 2020

    Is your feature request related to a problem? It would be great to have an event propagated when the component is closed

    Describe the solution you'd like Emit an event

    Additional context The reason behind this is my need to wrap the component into another component, where the index is passed down as prop. This prevents leaking the library to the whole codebase. But this issue I get with this is the mutation of the prop directly, I'm fine with this as long I was able to set that prop to null again (on the parent).

    enhancement 
    Reply
  • Add caption to image
    Add caption to image

    Apr 21, 2020

    It would be great to add a caption to the image. Example:

    image

    enhancement 
    Reply
  • Center the gallery's thumnbail div
    Center the gallery's thumnbail div

    Jun 23, 2020

    Center the gallery's thumbnail div to the chosen image if there are more pictures than the window's width.

    enhancement 
    Reply
  •  Add events: onNext, onPrev, onClose
    Add events: onNext, onPrev, onClose

    Jul 3, 2020

    This will allow the user to add some biz-logic regarding component usage, e.g:

    • Track when the user moves forward/back
    • React to onClose event(s)
    • Wrap the component on another component and propagate changes instead of directly mutating props

    Hope this is a non-intrusive change as users who don't want to use these don't have to.


    Fixes #27

    enhancement 
    Reply