Creating anchor links to photos

Hello, I hope I can explain this well enough to get an answer. 

I have a live page that contains multiple panoramic images, one after the other, each as a slideshow reels and it works very well. Here is the live page: https://www.scottdimond.com/gigapixel

The number of images is getting to be fairly large and that could mean a visitor has to do lots of scrolling to find an image they are interested in. I created a test page to experiment with putting a navigation gallery of thumbnails at the start of the page and it is: https://www.scottdimond.com/gigapixel-copy-testing

What you will see on the test page is that I inserted a simple grid that will have thumbnails of all the images on the page (right now, just the first two thumbnails represent images on the page with working links). The idea is that the click through link on each thumbnails takes the visitor to the specific image on the page that is represented by the thumbnail. The click through link for each thumbnail photo is properly formatted like this: https://www.scottdimond.com/gigapixel-copy-testing/#SD_220911_1481T as to jump to the location on the page where the large image of the photo is positioned. 

The problem is that I can't seem to find a way to associate the jump link with each photo. What I did was add a section just in front of a photo and add code to it like this: <p id="SD_220911_1481T"><SD_220911_1481T/p>. It works but it presents two problems; 1) it just adds more unnecessary white space and 2) if I move the photos up and down the page, I will have to move the sections that sits in front of them as well, which is just a recipe for disaster. Right now on the live page I can use the up or down arrows on the section to move a photo up the page or down the page. And if I had the jump link associated with the photo  and not with the section before it, I could rearrange the photos on the pages as much as I wanted and still have the links associated with the thumbnails position the visitor to the correct photo. 

Btw, I added text the the current sections that contain code like <p id="SD_220911_1481T"><SD_220911_1481T/p> just so I could see what image the code relates to, in case I have to move that section and the photo up or down the page as pairs. But ideally, if I could associate the jump link with the photo, everything would be wonderful and these undesirable sections that only hold the jump link code would be unnecessary. 

So, how to I go about associating something like <p id="SD_220911_1481T"><SD_220911_1481T/p> with each of the photos on the page, so I can have the click through links on each thumbnail photo (like https://www.scottdimond.com/gigapixel-copy-testing/#SD_220911_1481T&nbsp) work?

And one final question, when working with a test page as I'm now, if I actually got everything working, is there a simple way to swap pages so the test one becomes the live one? I would hate to have to remember all the things I did on the test page to get it to work and then apply all of them to the live page. 

Thanks, Scott 

nvm. Gave up waiting and will try jump ids in the section above