Canvas Support

Enable Swipe for Lightbox

5 replies · opened Sep 29, 2021

JJaySmokeSep 29, 2021

Hi Guys,
I was wondering if it's possible to have the lightbox images swipe as well as click to view next image?

SSemicolon WebSTAFFSep 30, 2021

Hello,

Touch Swipe for Lightboxes are currently not included. However, you can consider using this Plugin: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin (include the JS File just before js/functions.js JS File Linking in the HTML File).

Then use the following code after the js/functions.js JS File Linking:
[ch_pre]

$(function() {

var magnificPopup = $.magnificPopup.instance;

//Enable swiping...
$(".mfp-content").swipe({
	//Generic swipe handler for all directions
	swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
		if( direction == "left" ) {
			magnificPopup.prev();
		} else if( direction == "right" ) {
			magnificPopup.next();
		}
	}
});

});

[/ch_pre]

This should enable the Swipe Effect for Lightboxes. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

JJaySmokeSep 30, 2021

Hello, I just tried it and it didn't work?

  1. I downloaded jquery.touchSwipe.js and uploaded it into the js folder
  2. I added the line <script src="js/jquery.touchSwipe.js"></script> above <script src="js/functions.js"></script>
  3. I add the code above below <script src="js/functions.js"></script>

I have uploaded it for you to take a look. Thanks.

SSemicolon WebSTAFFOct 1, 2021

Hello,

Apologies for the Inconveniences caused!

Please consider trying this code instead:
[ch_pre]<script>

$('[data-lightbox="gallery"]').on('mfpOpen', function(e) {

var magnificPopup = $.magnificPopup.instance;

//Enable swiping...
$(".mfp-content").swipe({
	//Generic swipe handler for all directions
	swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
		if( direction == "left" ) {
			magnificPopup.prev();
		} else if( direction == "right" ) {
			magnificPopup.next();
		}
	}
});

});

</script>[/ch_pre]

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

JJaySmokeOct 3, 2021

Hello,
It does get the job done. I would have prefered it act like a real drag thou to give off the impression that it's been dragged left or right. But if that can't work, I'll settle with this.

Is it possible to use external scripts in canvas? I was able to use a script to create this effect here, https://afrotexpetroleum.com/gallery.html

SSemicolon WebSTAFFOct 4, 2021

Hello,

This is because the Plugin does not support the Swipe Functionality natively. Currently this is the only solution possible. Using 3rd Party is perfectly possible, but then you will need to disable the currently used Lightbox Plugin, which can be done by simply not using [data-lightbox].

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard