Javascript is something that I am learning bit by bit, so please excuse my ignorance…! 😉
I have a list of images in a gallery, and I am creating a modal on a click event. I have managed to collect all of the sources for the images into an array and have then used the forEach method to appended an li and img tag into a parent ul, with all of the sources going into the src attribute.
My problem is I also have an array of alt attributes as well that I also need to set into the same list of images.
I don’t think I can do both attibutes in one forEach loop, and it seems too messy to do a second loop for the alt attributes. There must be a simpler way, it’s just beyond my current undersatnding.
Here is the code I already have below, I was wondering if perhaps I should be looking at a Json object instead rather than this approach?
$('.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>');
}
});