Html - How to enlarge image and display it at bottom of the page

Harshjain
July 9, 2024
194 views
0 votes
2 Answers

I created a webpage with a theme of Image gallery. I have inserted several thumbnails. Now I want that whenever a user click on a thumbnail the image gets larger and is displayed in the bottom space of the page.

Here whenever I click on a thumbnail above, I want that the image is displayed in the encircled part of the page.
Below is my HTML and CSS code.
HTML –

<!DOCTYPE html>
<html>
    <head style="color: antiquewhite;">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="image_gallery.css">
        <title style="color: blue;">Image Gallery</title>
    </head>

    <body class="FullBody">
        <div class="Heading">
            Responsive Image Gallery
        </div>
        <div class = "AllImages">
            <img src="1.jpg" alt="1st image">
            <img src="2.jpg" alt="2nd image">
            <img src="3.jpg" alt="3rd image">
            <img src="4.jpeg" alt="4th image">
            <img src="5.jpg" alt="5th image">
            <img src="6.jpg" alt="6th image">
            <img src="7.jpg" alt="7th image">
            <img src="8.jpg" alt="8th image">
            <img src="9.jpg" alt="9th image">
            <img src="10.jpg" alt="10th image">
        </div>

        <footer class="Footer">
            <span class="FooterRight">Copyright - Harsh Jain</span>
            <span class="FooterLeft">Created - 03/07/2024</span>
        </footer>
    </body>
</html>

CSS –

.FullBody
{
    background-image: url('BackgroundImage.jpg');
    background-size: cover ;
}
.Heading
{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    align-content: center;
    text-align: center;
    color: azure;
    height: 100px;
}
.Footer
{
    height:40px;
    background-color: black;
    color: white;
    align-content: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: medium;
    width:100%;
    position: fixed;
    bottom: 0px;
    left:0px;
}
.FooterLeft
{
    float: left;
}
.FooterRight
{
    float: right;
}
img
{
    height:100px;
    width:9.78%;
    border:2px solid whitesmoke;
    border-radius: 2px;
    float:left;
}
.AllImages
{
    margin-left:10px;
    margin-right:10px;
    margin-top:2px;
    margin-bottom: 2px;
}

I tried searching but got no help all I got was resizing of images on clicking.
One of the link is here.

Answers

You need to create a container that will handle the image preview, then create a js function that will show the selected image and apply the design.

I made a simple preview image below base on your code, so you can refer to it.

function previewImage(image){
  let previewContainer = document.getElementById('preview')
  let loader = document.getElementById('loader')
    loader.style.display = "block"
  setTimeout(() => {
    loader.style.display = "none"
    previewContainer.style.backgroundImage = `url("${image.src}")`
    previewContainer.style.backgroundRepeat = "no-repeat"
    previewContainer.style.backgroundPosition = "center center"
    previewContainer.style.backgroundSize = "cover"
  },500)
}

#preview{
      border: 1px solid #ccc;
      height: 100vh;
      overflow: auto;
      margin-top: 10px;
      align-items: center;
      display: flex; /* Make #preview a flex container */
      justify-content: center;
}
#loader {
  display:none;
  border: 16px dotted #f3f3f3;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.FullBody
{
    /*background-image: url('BackgroundImage.jpg');*/
    background-image: url('https://images.wallpaperscraft.com/image/single/sand_black_beach_130680_2560x1024.jpg');
    background-size: cover ;
}
.Heading
{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    align-content: center;
    text-align: center;
    color: azure;
    height: 100px;
}
.Footer
{
    height:40px;
    background-color: black;
    color: white;
    align-content: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: medium;
    width:100%;
    position: fixed;
    bottom: 0px;
    left:0px;
}
.FooterLeft
{
    float: left;
}
.FooterRight
{
    float: right;
}
img
{
    height:100px;
    width:9.60%;
    border:2px solid whitesmoke;
    border-radius: 2px;
    float:left;
}
.AllImages
{
    margin-left:10px;
    margin-right:10px;
    margin-top:2px;
    margin-bottom: 110px;
}

<body class="FullBody">
    <div class="Heading">
      Responsive Image Gallery
    </div>
    <div class = "AllImages">
        <img src="https://picsum.photos/100" alt="1st image" onclick="previewImage(this)">
        <img src="https://picsum.photos/200" alt="2nd image" onclick="previewImage(this)">
        <img src="https://picsum.photos/300" alt="3rd image" onclick="previewImage(this)">
        <img src="https://picsum.photos/400" alt="4th image" onclick="previewImage(this)">
        <img src="https://picsum.photos/500" alt="5th image" onclick="previewImage(this)">
        <img src="https://picsum.photos/600" alt="6th image" onclick="previewImage(this)">
        <img src="https://picsum.photos/700" alt="7th image" onclick="previewImage(this)">
        <img src="https://picsum.photos/800" alt="8th image" onclick="previewImage(this)">
        <img src="https://picsum.photos/900" alt="9th image" onclick="previewImage(this)">
        <img src="https://picsum.photos/110" alt="10th image" onclick="previewImage(this)">
    </div>

    <div id="preview">
      <div id="loader" /> 
    </div>

    <footer class="Footer">
        <span class="FooterRight">Copyright - Harsh Jain</span>
        <span class="FooterLeft">Created - 03/07/2024</span>
    </footer>
</body>

function displayImage(img) {
  var largeImage = document.getElementById("largeImage");
  largeImage.src = img.src;
}

.FullBody {
  background-image: url("BackgroundImage.jpg");
  background-size: cover;
}

.Heading {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: xx-large;
  align-content: center;
  text-align: center;
  color: azure;
  height: 100px;
}

.Footer {
  height: 40px;
  background-color: black;
  color: white;
  align-content: center;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: medium;
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

.FooterLeft {
  float: left;
}

.FooterRight {
  float: right;
}

img {
  height: 100px;
  width: 9.78%;
  border: 2px solid whitesmoke;
  border-radius: 2px;
  float: left;
}

.AllImages {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.displayArea {
  text-align: center;
  margin-top: 20px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.displayArea img {
  max-width: 80%;
  max-height: 400px;
  width: auto;
  height: auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="image_gallery.css" />
    <title>Image Gallery</title>
  </head>

  <body class="FullBody">
    <div class="Heading">Responsive Image Gallery</div>
    <div class="AllImages">
      <img src="1.jpg" alt="1st image" onclick="displayImage(this)" />
      <img src="2.jpg" alt="2nd image" onclick="displayImage(this)" />
      <img src="3.jpg" alt="3rd image" onclick="displayImage(this)" />
      <img src="4.jpg" alt="4th image" onclick="displayImage(this)" />
      <img src="5.jpg" alt="5th image" onclick="displayImage(this)" />
      <img src="6.jpg" alt="6th image" onclick="displayImage(this)" />
      <img src="7.jpg" alt="7th image" onclick="displayImage(this)" />
      <img src="8.jpg" alt="8th image" onclick="displayImage(this)" />
      <img src="9.jpg" alt="9th image" onclick="displayImage(this)" />
      <img src="10.png" alt="10th image" onclick="displayImage(this)" />
    </div>
    <div id="displayArea" class="displayArea">
      <!-- The clicked image will be displayed here -->
      <img id="largeImage" src="" alt="Large Image" />
    </div>
    <footer class="Footer">
      <span class="FooterRight">Copyright - Harsh Jain</span>
      <span class="FooterLeft">Created - 03/07/2024</span>
    </footer>
    <script src="image_gallery.js"></script>
  </body>
</html>

`// image_gallery.js

function displayImage(img) { var largeImage = document.getElementById("largeImage"); largeImage.src = img.src; }
In this setup:

The displayImage function is called whenever a thumbnail is clicked.
This function sets the src attribute of the large image to the src of the clicked thumbnail, displaying it in the displayArea.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to enlarge image and display it at bottom of the page

Answers