Lightgallery.js – Display Lightbox Gallery Slideshows of Images and Videos

Lightboxes were and are on trend as always to display a bunch of images, videos or even portfolios but building it from scratch is a laborious task to do.

So today I’m introducing all you guys with a new and fully featured Javascript plugin to showcase images and galleries in a lightbox fashion.

lightgallery.js

Lightgallery.js – A JS library that will enable you to create a beautiful image & video galleries. The JS library is very lightweight and responsive that has various inbuilt features which separate it from various others.

Let’s see some of its main features:

  • Fully responsive.
  • Touch support for mobile devices
  • CSS3 Transitions with jQuery fallback
  • Full-screen support & Supports zoom
  • Animated thumbnails
  • HTML iframe support.
  • YouTube, Vimeo, Dailymotion, VK and HTML5 video support.
  • and much more…

These were some of its features that are available with the JS plugin.

Now let’s see the configuration of Lightgallery.js:

How to Use Lightgallery.js?

Download a copy of the JS library from GitHub Repository

Include CSS and JavaScript files in your web page.

The CSS Files of lightGallery.js

The Javascript files of lightGallery.js

OR

Lightgallery.js CDN:

You can also use the CDN of the JS plugin in your web page directly from the cloud server.

That was how to include and including of JS and CSS files of the JS plugin, now approaching forward to learn more about lightGallery.js

Recommended Readings:

The HTML Markup to start up with:

You can use own selectors, classes, and IDs.

The Javascript Code:

Now we will call and initiate the plugin with the below code.

This was how to include and start the Lightgallery.js plugin. For more customization and options, let’s dig deeper in the plugin.

LightGallery.js Examples & Demos:

There are many examples which you can use as your lightbox gallery. Let’s see some of them:

Gallery with animated thumbnails:

lightGallery.js thumbnail

This will help you create animated thumbnails for your gallery. Look below for the code:

The HTML Structure:

The Javascript Code:

Note: If you want a Gallery without animation you just have to use the below code:

Gallery with custom transitions.

This plugin is really very awesome it has CSS3 transitions too, you can add the CSS3 transitions in each of your images in the slideshow.

The Javascript Code:

Note: You have to include the lg-animations.css in your <head> tag to get more animations. Default has two animations lg-slide and lg-fade.

Recommended Readings:

Coming to next example:

Youtube, Vimeo Video Gallery

The HTML Structure:

The Javascript Code:

Moving forward…

Lightgallery Captions:

The HTML Markup:

The Javascript Code:

Similarly, you can use any one your choice which gallery you liked and need the most.

LightGallery.js Options:

The JS library comes with various handy options that are very effective when applied with the JS code, the options completely customizes the plugin and gives it a different look.

Let’s see the options list:

  • Thumbnail
  • Autoplay
  • Video
  • Fullscreen
  • Pager
  • Zoom
  • Hash
  • Share

Now let’s see how to pass the options in the JS Code:

 

If you want to check out the Lightgallery.js demo then you can see below:

If you want to read more about the options then you can visit here.

For more info of the documentation, you can also refer the official website.

Now it’s your time to try out the Lightgallery.js plugin on your website to showcase the portfolio of your images and videos.

(Visited 280 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply