How to make an image flash/zoom full screen, which is present in a web page

user_19457006 0
Viewed 42

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.

html javascript
1 Answers
  1. Use <div id="largePic"></div> to display full screen image.
  2. Use <div class="img-block"><img src=""></div> to display normal size images.
  3. Use Jquery to get image src in <div class="img-block">, write img src in <div id="largePic">.
  4. Add class 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

user_182292590
Related