Fullscreen Lightbox Slideshows with Lightgallery.js

Any great blog or portfolio website can benefit from a modal lightbox slideshow. This can be good for showcasing related photos or letting visitors browse through a portfolio of work (design, art, photography).

With lightgallery.js, you just install the library and let it run. You can set it up with any number of photos and each slide takes up the entire screen.

I vastly prefer this plugin over other slideshows that only take up a portion of the screen. With lightgallery.js, all focus goes onto the slideshow and the first visible image.

At the bottom of each slide, you can find a small description with links or whatever text you want.

In the upper-right corner, you’ll see a series of buttons for extended features. In order, they go like this:

• Play slideshow
• Zoom in/out
• Browser fullscreen
• Social sharing
• Image download
• Close slideshow

You can pick and choose which of these buttons you want to display by editing the options when you call the plugin.

In fact, I’m blown away by how much detail went into the documentation. It has details for options and callback methods. But you’ll also find info for custom data attributes, Sass variables, and even a plugin API to build modules onto lightgallery.

Oh, and did I mention it’s completely mobile-friendly? You can swipe photos through the gallery with your finger or even with a mouse.

It’s the perfect choice for a designer or photographer who wants a brilliant method to display their portfolio on their site.

You can even embed iframes or videos from sites such as YouTube or Vimeo. This truly is the best lightbox gallery plugin offering the best possible user experience.

This library is free of all dependencies and it runs on pure JavaScript. But it plays nice with big libraries such as jQuery or Bootstrap as well.

If you’d prefer this as a jQuery plugin there is a lightgallery.js plugin ported for jQuery users. You can see a full demo on the demos page or check out the pen below. And if you need the source code head over to the GitHub repo and grab a copy for yourself.

Read Also:  20 Minimalist Portfolio Designs For Your Inspiration