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.

Share:
This entry was posted in Image Galleries and tagged . Bookmark the permalink.

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

  1. Peeter says:

    Thanks man, you saved some of mz time to solve this 🙂

  2. Jeff says:

    Hi this functions work great with Swipebox, I implemented both of them and worked fine altogether.

    Can you help me with another option, is there a way to change the “back to the first image” behavior, I mean, by default if one set “loopAtEnd: true” when the gallery hit the last image and click next button it scrolls all the way back to the firs image, that’s nice if you have a few images, but with big galleries that have several hundreds photos is not cool. It is possible to change it so it just go right next to the first image without scrolling back, actually, just scroll “to the front”

Leave a Reply

Your email address will not be published.