I've recently implemented a lightbox gallery on my website. The left and right arrows have been added to navigate between images in the gallery. However, I am struggling to make the left arrow go to the previous image and the right arrow to the next one. I've tried various methods but haven't been successful yet. Any assistance or guidance on this issue would be greatly appreciated. Thank you!
https://jsfiddle.net/fabfivefebby/2z9unx02/2/
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
var $exit = $("<div><button id='exit'> x </button></div>");
var $buttonLeft = $("<button id='buttonLeft'> < </button>");
var $buttonRight = $("<button id='buttonRight'> > </button>");
$overlay.append($exit);
$overlay.append($buttonLeft);
$overlay.append($buttonRight);
$overlay.append($image);
//2.2 A Caption
$overlay.append($caption);
//2. Add overlay
$("body").append($overlay);
var updateImage = function (imageLocation, captionText) {
//1.2 Update overlay with the imagelinked in the link
$image.attr("src", imageLocation);
//1.3 Add Caption from alt. Get child's alt att and set Caption
$caption.text(captionText);
}
//1. Capture the click event on a link to an image
$("#stillGallery a").click(function(event) {
event.preventDefault();
var imageLocation = $(this).attr("href");
var captionText = $(this).children("img").attr("alt");
$index = $(this).parent().index();
//this is calling that new Update overlay function above
updateImage(imageLocation, captionText);
//1.1 Show the overlay
$overlay.show();
});
$buttonRight.click(function() {
console.log("testing");
});
$exit.click(function(){
$overlay.hide();
});
$overlay.click(function(){
$overlay.hide();
});