Gallery Display


Wasn’t sure where to put this topic as it covers a couple of different subjects. Ok, here goes:

I am building a totally custom photo gallery for my new personal website. I am developing the main photo viewer page. The flow I am aiming for is:

Photos list > Photo in page > Photo in fullscreen viewer

I have that built and I have previous and next buttons on my “photos in page” layout. These work by doing ajax calls to grab the next/previous image and updating the page.

When I click a fullscreen button, a new page opens but this is where I am a bit stuck. I need a similar page where the photo shows in the middle with previous and next buttons either side that do ajax calls but I also want a swipe left/right gesture to bring in the previous/next photos. I’m just not sure where to start and how to go about building this.

My photo needs to slide towards the left and then do a call to get the next image and then show that one in the middle. It’s how to do the sliding, knowing at what stage the slide is in, the physics of the slide to get it to feel right and how to call the next and previous photos.

As I’m sure you can tell, i’m just very confused and unsure how to begin with this.

I’d prefer not to use a prebuilt solution as half the fun is doing it myself.

Any ideas on how to go about this?

Kind regards,