Nivo Lightbox isn’t the most widely known of Dev7studios products, but it’s a solid and simple image slider.

However one feature it doesn’t currently have is transition effects when navigating left/right through a gallery. It turns out though that a couple of small modifications were all that was needed to provide the required hooks. You can see my pull request on Github here. This gives you two more functions you can configure on the front-end to trigger whichever Javascript or CSS library you prefer.

Here’s an example using the very flexible Animate.css to give the images a sliding with simultaneous fade effect:

$('.lightbox').nivoLightbox({
                beforePrev: function() {
                        var deferred = $.Deferred();
                        el = $('.nivo-lightbox-content');
                        el.addClass('fastAnimated fadeOutRight');
                        el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
                            el.removeClass('fadeOutRight');
                            deferred.resolve();

                        });
                        return deferred.promise();
                },
                onPrev: function() {
                    el = $('.nivo-lightbox-content');
                    el.hide();
                    el.addClass('fastAnimated fadeInLeft').show();
                    el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
                    function (e) {
                        el.removeClass('fadeInLeft');
                    });
                },
                beforeNext: function() {
                        var deferred = $.Deferred();
                        el = $('.nivo-lightbox-content');
                        el.addClass('fastAnimated fadeOutLeft');
                        el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
                            el.removeClass('fadeOutLeft');
                            deferred.resolve();
                        });
                        return deferred.promise();
                },
                onNext: function() {
                    el = $('.nivo-lightbox-content');
                    el.hide();
                    el.addClass('fastAnimated fadeInRight').show();
                    el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
                    function (e) {
                        el.removeClass('fadeInRight');
                    });
                },
            });

There’s a couple of things to highlight about this code:

• The first is that the beforePrev/Next functions are returning a defered object. This is key to preventing the onPrev/Next functions from executing until we are done.
• Second, it’s using jQuery’s .one() to detect the CSS animation completion events webkitAnimationEnd oanimationend msAnimationEnd animationend – this means we can then tell Nivo Lightbox that our animations on the existing image have completed and it can then replace it with the next image.

Following this same basic pattern you can easily integrate any transition library you want, without having to use a plugin bloated with effects you done need.