I currently have 4 images loaded onto my website. Whenever I click on one of the images, it becomes highlighted as desired using the following code:
JavaScript Function 1 :
var ImageSelector = function() {
var imgs = null;
var selImg = null;
return {
addImages: function(container) {
imgs = container.getElementsByTagName("img");
for(var i = 0, len = imgs.length; i < len; i++) {
var img = imgs[i];
img.className = "normal";
img.onclick = function() {
if(selImg) {
selImg.className = "normal";
}
this.className = "highlighted";
selImg = this;
urlSet(this.src);
};
}
}
};
}();
JavaScript Function 2:
var div = document.getElementById("menu");
ImageSelector.addImages(div);
CSS Styling :
.normal {
border:none;
}
.highlighted {
border:8px solid #19A3FF;
}
Additionally, I've implemented a jQuery script that fetches and displays all images from a specific folder. Here is the code snippet:
var dir = "images/";
var fileextension = ".jpg";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function (data) {
//List all png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location, "").replace("http://example.com/", "");
$(".menu").append($("<img src=" + dir + filename + " width=300 height=300>"));
});
}
});
The corresponding HTML content is as follows:
<div>
<div id="menu" class = "menu">
</div></div>
After integrating the jQuery function, the images are successfully displayed but unfortunately they are not clickable anymore. How can I go about ensuring they remain clickable? Any suggestions would be greatly appreciated. Thank you.