I started working on advanced java few days before(too late to start on that, I know). I am stuck with a specific task of making an image (which is present on the body of the html page) throw or flash it or zoom it in full screen.
I have been searching for a while now but is there a way to make an image if click on then it would get bigger on users screen once then go back to normal.
<div id="largePic"></div> to display full screen image.<div class="img-block"><img src=""></div> to display normal size images.<div class="img-block">, write img src in <div id="largePic">.active to <div id="largePic"></div> when click <div class="img-block">, remove active when click <div id="largePic"></div>javascript
let imgBlocks = document.getElementsByClassName("img-block"),
largePic = document.getElementById('largePic')
for (let i = 0; i < imgBlocks.length; i++) {
imgBlocks[i].onclick = function (e) { imgZoom(e) }
}
function imgZoom(e) {
let src = e.target.src
largePic.classList.add('active')
document.getElementById('pic').innerHTML = `<img src="${src}">`
}
largePic.onclick = function () {
largePic.classList.remove('active')
}
Or use jquery
$(".img-block").click(function () {
$(".largePic").addClass("active");
$("#pic").html(`<img src="${$(this).find("img").attr("src")}">`);
});
$(".largePic").click(() => {
$(".largePic").removeClass("active");
});
$(".img-block").click(function () {
$("#largePic").addClass("active");
$("#pic").html(`<img src="${$(this).find("img").attr("src")}">`);
});
$("#largePic").click(() => {
$("#largePic").removeClass("active");
});div.img-block {
box-sizing: border-box;
width: 100%;
}
div.img-block img {
display: block;
margin: 0 auto;
}
div.largePic {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
div.largePic div#pic {
width: 90%;
}
div.largePic div#pic img {
width: 100%;
display: block;
margin: 0 auto;
}
div.largePic div#pic, div.largePic {
opacity: 0;
transition: 0.4s;
}
div.largePic.active {
z-index: 10000;
}
div.largePic.active div#pic, div.largePic.active {
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="largePic" class="largePic">
<div id="pic"></div>
</div>
<div class="img-block">
<img width="60%" src="https://img.freepik.com/free-photo/milford-sound-new-zealand-travel-destination-concept_53876-42945.jpg?w=2000">
</div>
<div class="img-block">
<img width="60%" src="https://pikwizard.com/photos/7dfd148fb38cdc9da4a1913244af4a5f-s.jpg">
</div>
</body>`strong text