The slideshow is designed in a way where each image is not loaded all at once, but rather displayed individually by changing the image source dynamically.
If you want to link directly to a specific image, you can work around this limitation. The image data is stored in an array called "photos", so creating a button that triggers the loading of a particular photo is possible. By modifying the function "navigate" to allow for loading arbitrary photos, you can achieve this.
A code snippet like the following should do the trick:
var navigate_to = function(image_number) {
if(animating) {
return;
}
currentImg = image_number;
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
This code may need some tweaking depending on your specific setup. Once implemented, you can create a link that calls this function with the desired image index.
To facilitate this linking process, you can create an element like so:
<div class="navigator">1</div>
Then include the following code:
$(".navigator").on("click", function () {
navigate_to(parseInt($(this).html(), 10));
});
No hyperlink creation is necessary as this function facilitates in-page navigation. Clicking on an element with the class "navigator" will trigger the sending of the element's value to "navigate_to". As long as integer values are present in these elements, this method should work effectively.