As I continue to learn JavaScript, please bear with me as I navigate through my current level of understanding. I am working on a gallery that opens a modal when an image is clicked. I have successfully gathered all the image sources into an array and used forEach to append them within li and img tags in a parent ul element, setting the sources as the src attribute.
However, I'm facing an issue with also needing to set alt attributes for each image from a separate array. Trying to accomplish this within the same forEach loop seems cluttered, and using another loop for alt attributes doesn't feel efficient. Perhaps there's a simpler solution that I haven't grasped yet.
I'm sharing the existing code below. Would it be better to consider using a JSON object instead of the current method?
$('.gallery-image img').click(function(){
$('.modal').addClass('show');
var images = document.getElementsByClassName('aurora-gallery-image');
var imageSources = [];
var imageTitles = [];
for (var i = 0; i < images.length; i++) {
imageSources.push(images[i].src);
imageTitles.push(images[i].alt);
}
imageSources.forEach(imageFunction);
function imageFunction(item){
$('.image-modal ul').append('<li class="image-modal-item"><img class="modal-content" alt="" src="' + item + '" /><p id="aurora-gallery-image-title"></p></li>');
}
});