Is it possible to add a swipe action to change from page to page?

Hi,
I have a very old website with loads of gallery pages in differently named parent folders and am looking for a fix for mobile usage. I want to add a swipe that allows swiping from page to page (diff url’s).
The site has multiple pages with images and next/previous buttons so …/folder1/page1.htm and …/folder1/page2.htm etc. Is it possible to implement a swipe action in this scenario?
Thanks for any help
G

jQuery implements a Swipe event, which you could then map to a document.location change.
Underlying that I believe will be the Touch events - some combination of touchstart and touchend to identify the distance and speed moved during the motion…

1 Like

Thanks very much for your reply.
As a non-javascript coder how much work is involved in that?
it’s work I would have to oustource.
Thanks again

I am no particular JS expert, so take this post with a grain of salt.

I tried the JQuery swipe implementation a couple months ago using the JQuery Mobile library jquery.mobile-1.5.0-alpha.1.min.js, which was my understanding of where the swipe code is implemented. Unfortunately that library also did a fair bit of mucking around with my code, changing CSS values to try to do a mobile makeover of sorts. I ended up dumping that implementation though I did later see references to how to tell JQuery Mobile to stop doing that, which I didn’t try.

Instead I found a good JS implementation by user ‘gigawatt’ at https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android that I’m currently using. Note that you likely want to implement page prev/next via arrow keys in a similar way (ie, have the JS parse your prev/next buttons and grab the link), for those users with keyboards. I wouldn’t consider this novice level JS coding, but as I say I am not a JS expert and implemented it.

2 Likes

Just thinking out loud but if the images are on different urls how can a swipe work?

You can’t swipe an image and then have the new image start appearing at the other side as that would require two different urls to be active at the same time.

You could detect a swipe on the image and then load a new url but I don’t see that is any benefit to just clicking the prev/next button anyway as you won’t get a slide effect where one image slides in as the other slides out.

Or am I missing something obvious ? :slight_smile:

Swipe has become a very natural thing to do on mobiles, and while yes you won’t see the two pages sliding next to each other with the url change, I’ve found it to be a good UI. Plus, you don’t need the buttons (and the space they take up) anymore if you allow arrow keys.

1 Like

Any task like this that is very specific works well in a freelancers hands. I would recommend taking to the freelance sites with this and see what you get. I’m not a freelancer but this is one I’ve used before. To answer your question yes it is possible. Anything is really possible with enough time and money in this industry. However, the more specific and detailed the task the easier it will be to execute and deliver a successful result. In regards to price you need to make that judgement yourself based on quotes received.

Thanks for all the responses.
Just as an update. Someone on one of those freelance sites did come up with a solution. Technically not a swipe but it has the desired effect.

const $ = document.querySelector.bind(document)

let touchstartX
let touchendX

// ..Identifies the image to decide what to swipe.
const picture = $('.myImage')

picture.addEventListener('touchstart', e => {
  touchstartX = e.changedTouches[0].screenX
})

picture.addEventListener('touchend', e => {
  touchendX = e.changedTouches[0].screenX
  handleGesture()
})

function handleGesture() {
  if (touchendX < touchstartX) $('#Image5').click()
  if (touchendX > touchstartX) $('#Image4').click()
}
function set_url(i, url) {
  $(`table td:nth-child(${i}) > a`).href = url
}

try { set_url(2, prev) }
catch(e) {}

try { set_url(4, next) }
catch(e) {}

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.