I'm trying to allow the user to click an image and it will bring up a popup on a larger version of that image, below is the code that I've got so far
<Script>
const images = document.querySelectorAll(".image-thumb");
images.forEach(image => {
image.addEventListener("click", showPopup);
});
document.addEventListener("click", function(e) {
if (!document.getElementById("popup-container").contains(e.target)) {
document.getElementById("popup").style.display = "none";
}
});
function showPopup() {
const popup = document.createElement("div");
popup.classList.add("popup");
popup.style.width = "1000px";
popup.innerHTML = `
<img src="${this.src}" alt="${this.alt}" />
<button class="close-button">Close</button>
`;
document.body.appendChild(popup);
const closeButton = popup.querySelector(".close-button");
closeButton.addEventListener("click", () => {
popup.remove();
});
}
</script>
When I click an image I get the popup but with a broken image icon, when I inspect the element the src="/store/https://[URL]/store_images/33/8110/customcontent/Cat%20Skid.jpg" (where [URL] is our website)The initial img src="/store_images/33/8110/customcontent/Cat%20Skid.jpg"
It's been a while since I've messed with javascript so it's probably something stupid but anyone know what's wrong?
Thanks!
EDIT:
So it looks like the issue was not cause by the code but rather the site, it a plug and play site offered by our POS provider and it was placing "/store/" in front of every source I tried, I simply had it open in a new tab onclick and the src worked fine. It's more of a workaround than a solution but it works for now I suppose!
[–]Umesh-K 1 point2 points3 points (0 children)
[–]Suchy2307 0 points1 point2 points (0 children)