In my 3d art gallery project, I am utilizing plain JavaScript. The task at hand involves populating certain columns with images by pulling from an array of image sources. On click, I need to retrieve the index of the clicked image so that I can extract additional information such as titles and descriptions from the array.
While I could easily achieve this using jQuery, I am committed to learning plain JavaScript. All images already have event listeners in place. Below is the current code snippet:
var preview = document.getElementById('preview');
var subwrap = document.getElementById('subwrap');
var indexMatch;
for (var i=0; i <= imgList.length; i++){
document.images[i].addEventListener("click", srcSend, false);
}
function srcSend(){
var previewTitle = "Test Title";
var previewText = "Test Description";
var imgSrc = this.src;
console.log('Image Source ='+''+imgSrc+'');
if (imgSrc !== "file:///D:/Projects/mpaccione/img/navicon.png"){
preview.className = " ";
subwrap.className = "hide";
preview.className = "show";
preview.innerHTML = '<img src='+imgSrc+'><p id="title">'+previewTitle+'</p><p id="description">'+previewText+'</p>'; }}