With the Responsive Modular Lightbox it is possible to define customized JavaScript transition functions.

As an example we will write an fade-animation that uses jQuery-animation instead of css transitions.

The open function receives a jQuery-object of the lightbox. For the fade-effect we have to set the opacity first to zero and than animate the opacity back to one.

function jqFadein($lb) {
	$lb.css('opacity', 0).animate({ opacity: 1 });
}

The close function has two additional steps.

  1. As a first step we have to show the lightbox again with `$lb.css({ display: 'table' }).
  2. After this we can animate the opacity. When the animation is finished we have to remove the `display: table` or like in this example remove all styles that have been set with javascript. 

We also get a callback that we have to execute when the animation is finished.

function jqFadeout($lb, callback) {
	$lb.css({ display: 'table' }).animate({ opacity: 0 }, function() {
		$lb.removeAttr('style');
		callback();
	});
}

The slide function gets four parameters. A jQuery-object of the lightbox, the currently active slide, the next visible slide and the direction as a string, either "next" or "prev". Internally the change has already happened, so you need to show the active element and hide the next element before you start animating.

function jqFadeSlide($lb, $active, $new, direction) {
	$new.css({ position: 'absolute', opacity: 0 });
	$active.css({ display: 'block' }).animate({ opacity: 0}, function() {
		$active.removeAttr('style');
		$new.css({ position: 'relative' }).animate({ opacity: 1}, function() {
			$new.removeAttr('style');
		});
	});
}
The last step is to set this transitions with the options-object on initialization.
$('.bblb').bbLightbox({
	transition: {
		open: jqFadein,
		close: jqFadeout,
		slide: jqFadeSlide
	}
});

It is also possible to set custom animations as data-attributes. The only restriction in this case is that the transition is a global function.

<a href="image.png" class="bblb" data-transition-open="jqFadein" data-transition-close="jqFadeout" data-transition-slide="jqFadeSlide">Image</a>