Select Page


Photos are essential, whether or not you are operating an e-commerce or portfolio web site. What number of gross sales you make or new shoppers you get relies upon rather a lot on the standard of the photographs of your services that you could showcase by means of your pictures.

So it is smart to focus on your pictures with a lightbox. Lightboxes make your picture come out whereas the remainder of the web sites fades into the background.

It is best to take into account including a lightbox to your web site if showcasing pictures to your guests is vital for your enterprise. Fortunately, you do not have to spend so much of time constructing one from scratch since there are a number of free JavaScript lightbox widgets and plugins on the market that you could simply begin utilizing right now.

I will prevent much more time by reviewing among the greatest free and open supply JavaScript primarily based lightbox widgets and plugins on this submit. Lets get began.

1. Primary Lightbox

The Basic Lightbox is ideal for individuals who need to use one thing very light-weight for his or her tasks. It has no dependencies and works with all fashionable browsers ranging from IE11 with use of some polyfills.

The lightbox has a quite simple API making it simple to make use of. You possibly can have a number of situations of a lightbox utilizing the create() technique. All these situations could be modified independently and you’ve got full management over displaying or hiding the ligthbox, making modifications to the content material and displaying every kind of components like movies, pictures or iframes.

It’s also comparatively simple to customise the looks of the lightbox as a result of it does not ship with a number of predefined themes or customized courses. The lightboxes could be stacked over each other or made unclosable. Or you should use callbacks to find out what occurs when the lightbox is opened or closed.

2. Lightbox2

Lightbox2 is without doubt one of the hottest free JavaScript lightbox plugins. The plugin does require you to supply attribution nevertheless it does not must be user-facing. Captions turn into obtainable with use of the data-title attribute.

Lightbox2Lightbox2Lightbox2

It really works with all the key browsers. You get browser help again to IE9 when utilizing it with jQuery v2.x and all the way down to IE6 with jQuery v1.x. The plugin hundreds 4 pictures to create its UI with arrows and shut button and so forth. You possibly can change these with your individual pictures. There’s an possibility to make use of the data-lightbox attribute to be able to create picture teams for loading throughout the lightbox.

The plugin additionally provides you the flexibility to manage issues like becoming pictures throughout the viewport, wrapping round after customers navigate to the final picture, and fade length.

3. Colorbox

Colorbox is a jQuery primarily based, light-weight and easily-customizable lightbox plugin. You can even set up it as an NPM bundle. Its browser help goes way back to IE7.

Colorbox jQuery PluginColorbox jQuery PluginColorbox jQuery Plugin

A number of extra issues that you’ll like concerning the plugin embody the flexibility to fully change the looks of the lightbox utilizing CSS, extending the performance with occasion hooks and callbacks, and preloading of upcoming pictures. And all this works with no modifications to your present HTML.

You possibly can cross an object with key-value pairs to the plugin throughout initialization to create your personalized lightbox. The lightbox helps loading of all varieties of content material comparable to inline HTML, iframes, and movies in addition to populating content material with AJAX requests.

Check out all of the examples posted on the plugin homepage for some inspiration.

4. VenoBox

The VenoBox plugin is a light-weight different for individuals who need a lightbox that does not depend on different libraries like jQuery. Initially, VenoBox was additionally a jQuery plugin nevertheless it was later up to date to work with none third-party libraries.

VenoBox LightboxVenoBox LightboxVenoBox Lightbox

One of many distinctive options of the plugin that separates it from others is the flexibility to protect the peak of pictures which can be taller than the window on which the customers are viewing your web site. This enables folks to scroll up and all the way down to see your complete content material of the picture with out every part being scaled down—presumably to illegibility.

This plugin additionally means that you can load any type of content material throughout the lightbox comparable to iframes, inline HTML, or AJAX content material. You even have management over the facet ratio of those iframes, movies, and different components.

It’s simple to arrange and you may cross key-value pairs throughout initialization to vary the looks and habits of the lightbox. Comparable modifications may also be made instantly throughout the HTML utilizing data-attributes to get the identical consequence.

5. Magnific Popup

The Magnific Popup plugin means that you can shortly add a responsive lightbox to your web site. It focuses on offering an ideal person expertise and spectacular efficiency. You need to use it both with jQuery or with Zepto.js relying on how your web site is ready up.

Magnific PopupMagnific PopupMagnific Popup

There are lot of refined methods in which you’ll be able to change how the lightbox behaves. For instance, you possibly can scale the photographs such that they match each horizontally and vertically or solely horizontally. Equally, you will have full management over the place of captions and picture animations and so forth.

The lightbox means that you can load all varieties of content material like pictures, movies and AJAX requests. It additionally helps dealing with of loading error in conditions the place a picture does not load or an AJAX request fails for some cause.

6. Chocolat

Chocolat is a free, light-weight and responsive lightbox plugin. It seems nice on screens of all sizes and you too can specify your individual breakpoints to manage the way it seems on completely different gadgets.

ChocolatChocolatChocolat

Not like different lightbox plugins, Chocolat provides you the choice to indicate pictures both in fullscreen mode or inside a container. The photographs may also be resized to make them match inside completely different container sizes. Amongst different values, you possibly can set the picture dimension to both comprise or cowl. That is just like the habits of background-size property in CSS.

The plugin additionally helps keyboard navigation and picture looping to start out from the start after getting reached the final picture within the gallery.

7. Swipebox

Swipebox is one more jQuery-dependent lightbox plugin which works nice on mobiles, tablets in addition to desktops. The developer of the mission needs the plugin to be simple to make use of with none fancy options like social media buttons. The precedence is to maintain it bug-free and light-weight.

Swipebox LightboxSwipebox LightboxSwipebox Lightbox

It nonetheless comes with a good set of options like help for dynamic loading of pictures, keyboard primarily based navigation for desktops, swipe gestures for cellular gadgets, CSS primarily based animations with jQuery fallback. You possibly can cross an object with key-value pairs in the course of the initialization name of the perform to make modifications to the lightbox look or habits.

8. React Native Lightbox

This React Native Lightbox element is helpful for anybody who’s planning to create apps for cellular gadgets utilizing React Native. The repository supplies code to information you on the best way to combine the lightbox inside your iOS or Android apps.

You possibly can management the habits and look of the lightbox utilizing a bunch of properties. For instance, you possibly can assign a background shade to the lightbox or use a callback perform to find out what occurs when somebody opens or closes the lightbox.

9. React Picture Lightbox

The React Image Lightbox element is good for individuals who need a easy lightbox that works effectively with React. It comes with some good options like keyboard primarily based navigation, picture zooming capabilities, picture preloading for higher person expertise, cellular pleasant habits with help for pinch to zoom and swipe gestures.

React Image LightboxReact Image LightboxReact Image Lightbox

You additionally need not load any exterior CSS. The picture src values may also be assigned dynamically, making the lightbox very versatile and highly effective. Keyboard navigation can be rate-limited in order that unintended lengthy urgent of keys does not replace the lightbox pictures too quick.

10. Vue Simple Lightbox

This one is a tiny lightbox component which works with Vue.js. The 1.x model of the element works with Vue.js 3.0 whereas the 0.x model of the element works with Vue.js 2.0.

Vue Easy LightboxVue Easy LightboxVue Easy Lightbox

The UI may be very easy and effectively designed. You get some widespread performance like the flexibility to zoom out and in, drag or rotate pictures. You possibly can modify the default habits of the lightbox by making modifications to the worth of various props or utilizing callback features when sure occasions are emitted after person interplay like clicks on the earlier and subsequent buttons.

Ultimate Ideas

On this submit, we gave you a quick overview of among the hottest, free and open-source JavaScript lightbox plugins and scripts that you should use in your tasks. A few of them provide distinctive options that you just would possibly discover helpful. For instance, you should use VenoBox to indicate very tall pictures or Chocolat to load the lightbox inside a container.

You can even flick through different open supply Lightbox projects on GitHub if nothing right here meets all of your wants.