Change sensitivity of lightbox swipe on mobile


#1

Hello, On a mobile phone, when I go vertically on the lightbox to see the comments part, it swipes to other images. Do you know in which file and how I can change the swipe sensibility? Thank you very much, Marine


#2

Hello @marine,

Touch swipe for mobile devices is handled by the JavaScript file under buddypress-media/lib/touchswipe/jquery.touchSwipe.min.js

You will need to play with some code to get it working as per your requirements. Let me know if you have any further doubts.

Regards,

Joel Abreo


#3

Hello @Joel_Abreo, Thank you for you answer. I tried to change the threshold parameter injquery.touchSwipe.min.js, but even if I increase it a lot, it doesn’t change the swipe sensitivity. I don’t know which parameter I should modify ? Thanks a lot, Marine


#4

Hey @marine,

This is taking a bit longer than expected. Our team is looking into ways in which we can assist you. I will update you as soon as we make any progress.

Regards,

Joel Abreo


#5

Hey @marine,

Sorry to reply you so late.

Please copy the code from the below link and paste it in your theme functions.php file Code link: https://gist.github.com/raftaar1191/21a6728543e5c0f82a1e947392de0cf0

I hope this helps you. Let us know if this solves your issue or not. We look forward to your reply.

Thank you, Deepak


#6

Hello @Deepak_Gupta,

Thank you very much for this code. The problem is that it works only on a change of orientation of the mobile device, for each image. Do you know how I can put the swipe threshold to 100 for mobiles and tablets, but everytime, without any action on the orientation ? Thanks, Marine


#7

Hey @marine

I have updated the gist according to your requirement https://gist.github.com/raftaar1191/21a6728543e5c0f82a1e947392de0cf0

Kindly replace the previous code with this latest one.

I hope this helps you. Let us know if this solves your issue or not. We look forward to your reply.

Thanks, Deepak


#8

Thanks a lot @Deepak_Gupta, it works very well ! I just have two other questions, on which I am struggling for a few days : The first one: I want to retrieve in javascript the height and width of each element of class ‘.rtmedia-media’ in the lightbox (so the height and width of the left part of the lightbox, everytime the lightbox is displayed).

I tried using

rtMediaHook.register( 'rtmedia_js_popup_after_content_added', function() {
	jQuery('.rtmedia-media').each(function(){
	     alert('Height of the image:' + parseInt(jQuery(this).height(),10));
	     alert('Width of the image:' + parseInt(jQuery(this).width(),10));
	});
       return true;
});

but it often gives me wrong values such as a height of 22 (perhaps because the image is not completely loaded… ? ) I don’t know how to resolve it, and if I am using the right hook…

And the other question : Do you know if it is feasible, on a mobile device, when we click on a photo in the rtmedia gallery, to display the lightbox with the photo and with the description and comments below as it does by default ; but also to display the next photos of the gallery with their descriptions ans comments below, instead of having to swipe to see them ? Such as a big lightbox (ore lightboxes which follow one after the other), with photo and comments, photo and comments on a same screen ?

Thanks a lot, Marine


#9

Hey @marine

Nice to hear that your issue has being solved.

About the next two question 1> I want to retrieve in javascript the height and width of each element of class ‘.rtmedia-media’ in the lightbox? =>You can copy the code from the below link which will console the height and width of the element ‘.rtmedia-media’. https://gist.github.com/raftaar1191/245d5143c10dc4b28c27db5c77976a00

2>Such as a big lightbox (or lightboxes which follow one after the other), with photo and comments, photo and comments on the same screen? => This is possible but requires a lot of custom code. I suggest you get in touch with a professional WordPress developer for the same.

Thanks, Deepak


#10