Adding Background Click Closing and Next Image on Image Click to Swipebox Lightbox Plugin

There are several plugins for WordPress, that use Swipebox jQuery plugin. As an original plugin they are all missing a basic functionality, like closing the lightbox on background click and moving to the next image on current slide click. Here’s some JavaScript to fix this problem.

Add the following script to some JavaScript file in your theme (for WordPress) or put in header or footer inside <script> tags

To close the lightbox when a user clicks on background mask, we could use this javascript:

// addition for swipebox, closing img on click on bg

jQuery(function(){

"use strict";

jQuery(document.body)

// closes when bg clicked

.on('click touchend','#swipebox-slider .current img', function(){

return false;

})

.on('click touchend','#swipebox-slider .current', function(){

jQuery('#swipebox-close').click();

});

});

If you want the slide to move to next image, when clicking on current image, this js would help:

// addition for swipebox, next img when clicking on img

jQuery(function(){

"use strict";

jQuery(document.body)

// closes when bg clicked

.on('click touchend','#swipebox-slider .current img', function(){

jQuery('#swipebox-next').click();

});

});

You can see it working on my site at the bottom “Latest Biggies” section.