Select Page


Photographs 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 so much on the standard of the pictures of your services that you may showcase by your photos.

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

You must think about including a lightbox to your web site if showcasing photos to your guests is necessary for your online business. Fortunately, you do not have to spend so much of time constructing one from scratch since there are numerous free JavaScript lightbox widgets and plugins on the market that you may simply begin utilizing right this moment.

I am going to prevent much more time by reviewing a few of the finest free and open supply JavaScript primarily based lightbox widgets and plugins on this put up. 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 initiatives. It has no dependencies and works with all trendy browsers ranging from IE11 with use of some polyfills.

The lightbox has a quite simple API making it simple to make use of. You may have a number of cases of a lightbox utilizing the create() technique. All these cases may 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, photos or iframes.

It is usually comparatively simple to customise the looks of the lightbox as a result of it does not ship with numerous predefined themes or customized lessons. The lightboxes may 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 offer attribution but it surely does not need to be user-facing. Captions develop into out there with use of the data-title attribute.

Lightbox2Lightbox2Lightbox2

It really works with all the main browsers. You get browser help again to IE9 when utilizing it with jQuery v2.x and right down to IE6 with jQuery v1.x. The plugin masses 4 photos to create its UI with arrows and shut button and many others. You may exchange these with your individual photos. There’s an choice to make use of the data-lightbox attribute as a way to create picture teams for loading throughout the lightbox.

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

3. Colorbox

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

Colorbox jQuery PluginColorbox jQuery PluginColorbox jQuery Plugin

Just a few extra issues that you’ll like in regards to the plugin embrace the power to fully change the looks of the lightbox utilizing CSS, extending the performance with occasion hooks and callbacks, and preloading of upcoming photos. And all this works with no modifications to your present HTML.

You may cross an object with key-value pairs to the plugin throughout initialization to create your custom-made lightbox. The lightbox helps loading of all forms of content material similar 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 various for individuals who desire a lightbox that does not depend on different libraries like jQuery. Initially, VenoBox was additionally a jQuery plugin but it surely 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 power to protect the peak of photos which might be taller than the window on which the customers are viewing your web site. This permits individuals to scroll up and right down to see all the content material of the picture with out all the pieces being scaled down—presumably to illegibility.

This plugin additionally permits you to load any sort of content material throughout the lightbox similar 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 alter the looks and habits of the lightbox. Comparable modifications can be made straight throughout the HTML utilizing data-attributes to get the identical outcome.

5. Magnific Popup

The Magnific Popup plugin permits you to shortly add a responsive lightbox to your web site. It focuses on offering an awesome person expertise and spectacular efficiency. You need to use it both with jQuery or with Zepto.js relying on how your web site is about 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 may scale the pictures such that they match each horizontally and vertically or solely horizontally. Equally, you’ve gotten full management over the place of captions and picture animations and many others.

The lightbox permits you to load all forms of content material like photos, 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 motive.

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

ChocolatChocolatChocolat

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

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

7. Swipebox

Swipebox is yet one more jQuery-dependent lightbox plugin which works nice on mobiles, tablets in addition to desktops. The developer of the venture 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 photos, keyboard primarily based navigation for desktops, swipe gestures for cellular units, CSS primarily based animations with jQuery fallback. You may cross an object with key-value pairs through the initialization name of the operate 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 units utilizing React Native. The repository offers code to information you on combine the lightbox inside your iOS or Android apps.

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

9. React Picture Lightbox

The React Image Lightbox element is right for individuals who desire a easy lightbox that works properly 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 needn’t load any exterior CSS. The picture src values can be assigned dynamically, making the lightbox very versatile and highly effective. Keyboard navigation can also be rate-limited in order that unintentional lengthy urgent of keys does not replace the lightbox photos too quick.

10. Vue Straightforward 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 properly designed. You get some widespread performance like the power to zoom out and in, drag or rotate photos. You may 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.

Remaining Ideas

On this put up, we gave you a short overview of a few of the hottest, free and open-source JavaScript lightbox plugins and scripts that you should use in your initiatives. A few of them supply distinctive options that you simply would possibly discover helpful. For instance, you should use VenoBox to point out very tall photos or Chocolat to load the lightbox inside a container.

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