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).

25 Free Slideshow Plugins for WordPress – Best of

25 Free Slideshow Plugins for WordPress – Best of

A slideshow, also known as a slider or a carousel, is a brilliant method to stack and display…Read more

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.

lightgallery js pluginlightgallery js plugin

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.

See the Pen lightgallery.js by Sachin choolur (@sachinchoolur) on CodePen.

20 Minimalist Portfolio Designs You’ll Love

20 Minimalist Portfolio Designs You’ll Love

If you have a passion for white space and love sharp, clean design, the minimalist style would probably…Read more

Source: http://www.hongkiat.com/blog/fullscreen-lightbox-lightgallery-js/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s