In this article we axplain how to add a custom loader animation to your lightbox.

The standard loader of the lightbox is a gif, that is shown inside the not yet fully-loaded lightbox-slide.

You can change this easily by overriding the CSS according to your needs.

.bb-lightbox-loading .bb-lightbox-slide-content {
	width: 100px;
	height: 100px;
	background: my-loader.gif;
}

Having a loader-image is probably the easiest way to implement the loader but of course it has drawbacks too. The first disadvantage is that the loader has to load. If the loading animation is a bit complex and with a high enough resolution to look good on retina-devices the image can get quite big. Another drawback is that most of the time gifs only look good on an opaque background.

A great alternative to an image loader is spin.js. It dynamically creates spinning activity indicators that are configurable with a nice javascript-api. Additionally it has an optional jQuery-wrapper which we use in this example.

It is possible to show this in the lightbox-slide too but our recommendation is to add it to the background of the lightbox.

The first step is to remove the current loader-image.

.bb-lightbox-loading .bb-lightbox-slide-content {
	width: auto;
	height: auto;
	background: none;
}

Now the necessary javascript.

(function() {
	//optional to customize the animation.
	$.fn.spin.presets.bblb = {
		lines: 9,
		length: 35,
		width: 10,
		radius: 35
	}

	//helper-functions so we will not repeat code
	//check if slide that triggered the callback is currently visible
	function isActive($slide) {
		return $slide.hasClass('bb-lightbox-slide-active');
	}

	//check if slide that triggered the callback is currently loading
	function isLoading($slide) {
		return $slide.hasClass('bb-lightbox-loading');
	}

	function addLoader(lb) {
		getBackground(lb).spin('bblb'); //leave empty if no custom preset
	}

	function removeLoader(lb) {
		getBackground(lb).spin(false);
	}

	//get the background-element of the lightbox
	function getBackground(lb) {
		return lb.$lb.find('.bb-lightbox-bg-close');
	}

	$('.bblb').bbLightbox({
		onslideloading: function(lb, $slide) {
			if (isActive($slide)) {
				addLoader(lb);
			}
		}, onslideloaded: function(lb, $slide) {
			if (isActive($slide)) {
				removeLoader(lb);
			}
		}, onslideclose: function(lb, $slide) {
			if (isLoading($slide)) {
				removeLoader(lb);
			}
		}, onslideopen: function(lb, $slide) {
			if (isLoading($slide)) {
				addLoader(lb);
			}
		}
	});
}());

The loader should only be visible when the currently active slide is loading, not if another slide is preloading in the background. When the slide that should be visible is loading, the loader will be added to the background of the lightbox. At the moment it is ready the loader will be removed. If the lightbox closes or the next slide should be visible before the current slide is ready the loader has to be removed. If the next slide is not finished with preloading (or preloading is disabled through the options) the loader has to be added too.