Vue Components FTW - vue-pure-lightbox

This post is part of a series of articles looking at simple, easy to use components thatcan be added to your Vue.js application. You can view the entire series here and drop me a line with suggestions!

Today’s simple Vue component is vue-pure-light, a very lightweight and simple “lightbox” component. If you don’t know what a lightbox is, it’s the UI/UX feature where a picture can take over the entire screen to let you focus on it. You’ve probably seen it on real estate listings or art sites. The component supports npm installation as well as directly dropping in a CSS and JS tag in your HTML:

<!-- In <head> -->
<meta rel="stylesheet" href="https://unpkg.com/vue-pure-lightbox/dist/vue-pure-lightbox.css">
<!-- In <body>, after Vue import -->
<script src="https://unpkg.com/vue-pure-lightbox/dist/vue-pure-lightbox.js"></script>

Once installed, you can then use the <lightbox> tag in your application. There’s a grand total of three arguments - one for the thumbnail (the initial image), one for an array of image URLs, and an alternate text value.

And that’s it. You can also provide a custom loader but I found the one out of the box easy enough to use. So here’s a CodePen example provided by the author:

Pay special attention to the CSS panel. While the docs mention there’s custom styles in place it doesn’t actually enumerate them. The CSS panel here is a handy reference as to what you can customize. Also, he used cats, so therefore I love him. Case closed.

How about a slightly more advanced example? (And I really mean, “slightly”…) I began with the following markup:

<div id="app" v-cloak>

  <lightbox
    thumbnail="https://www.placecage.com/200/200"
    :images="images"
  >
     <lightbox-default-loader slot="loader"></lightbox-default-loader> 
  </lightbox>

</div>

If you don’t recognize the URL for the thumbnail, I’m using PlaceCage, a placeholder image service comprised entirely of Nicolas Cage pictures. I’ve specified that my images are being sourced from data in the Vue instance, so let’s take a look at that.

Vue.config.silent = true;

Vue.use(Lightbox);

const app = new Vue({
  el:'#app',
  data() {
    return {
      images:[]
    }
  },
  mounted() {
    for(let i=0;i<10;i++) {
      this.images.push(`https://www.placecage.com/c/${600 + (i*10)}/${600 + (i*10)}`);
    }
  }
})

In this case I’ve just created 10 dynamically sized images from the service. You can run this example here:

So while writing up this blog post I discovered that my favorite placeholder service, placekitten, is back up and running! Screw Nicolas Cage! Here’s a fork of the previous example with kittens. MUCH BETTER!

Isn’t that nicer? As always - if you have any comments or suggestions about this series, drop me a comment below.

Blog

Vue Components FTW - vue-pure-lightbox

Raymond Camden

Join Our Newsletter. No Spam, Only the good stuff.

Related