How do I get an image to change into another image in a custom lightbox I put together? I want to be able to click the image and have it expand into a different image, instead of a larger version of itself. Is there a simple way to use the code I'm working with? Or should I go with a different approach? Here's the code I'm using:
<html>
<head>
<title>simple</title>
<link rel="stylesheet" href="stylez.css">
</head>
<body>
<div class="container">
<img class="myImages" src="pics/art/fall.png" id="changeImage">
<img class="myImages" src="pics/art/man.jpg">
<img class="myImages" src="pics/art/me2opt.jpg">
<img class="myImages" src="pics/art/people.jpg">
<img class="myImages" src="pics/art/skulls.jpg">
<img class="myImages" src="pics/art/witch.png">
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
function changeImage() {
var image = document.getElementById('changeImage');
if (image.src.match("pics/art/fall.png")) {
image.src = "pics/art/man.jpg";
}
else {
image.src = "pics/art/fall.png";
}
}
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('myImages');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>```
Aucun commentaire:
Enregistrer un commentaire