CODEWITHSUNDEEP
javascripthtmlcssposition
Florian
Florian

Reputation: 659

Positioning buttons next to image

I already asked a similar question, but now I have changed a few styles and have no idea how I can position the close button to the top-right corner of the image as well as the previous and next buttons on the left and right side of the image with a given distance to it.

That's just before the footer of my page:

<div class="modal" id="modal">
    <div id="modal-content">
        <span class="gallery-button" id="close">✖</span>
        <span class="gallery-button" id="previous">◄</span>
        <span class="gallery-button" id="next">►</span>
        <img id="modal-image">
    </div>
</div>

How I show the modal:

function showModal(directory, response, i) {
    modal.style.display = "block";
    modalImg.src = document.getElementById(path(directory, response[i])).src;

    /* previousButton.style.display = "block"; */
    /* nextButton.style.display = "block"; */
}

And here is my styling:

/* Background when image is shown */
#modal {
    display: none; /* Hidden by default */
    /* Position */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    /* Sizing */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(119, 119, 119); /* Fallback color */
    background-color: rgba(119, 119, 119, 0.7); /* Black w/ opacity */
}

/* Image wrapper */
#modal-content {
    /* Sizing */
    width: 100%;
    height: 100%;
}

/* Image */
#modal-image {
    /* Sizing */
    max-width: 80%;
    height: calc(100vh * 0.6);
    /* Style */
    border: 10px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.54) 0px 0px 7px 4px;
    /* Horizontally center image */
    margin: auto;
    /* Zoom (image gets bigger) on open */
    animation-name: zoom;
    animation-duration: 0.6s;
    /* Vertically center image */
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

/* Gallery Buttons */
.gallery-button {
    /* Style */
    color: #ffffff;
    transition: 0.3s;
    background-color: #000000;
    border: 2px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 25px 3px;
    /* Makes the Button round */
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Previous Button */
#previous {
    font-size: 12px;
    /* Position */
    position: absolute;
    /* Horizontally */
    left: 30px;
    /* Vertically */
    top: 50%;
    transform: translateY(-50%);
}

/* Next Button */
#next {
    font-size: 12px;
    /* Position */
    position: absolute;
    /* Horizontally */
    right: 30px;
    /* Vertically */
    top: 50%;
    transform: translateY(-50%);
}

/* Close Button */
#close {
    font-size: 15px;
    /* Position */
    position: absolute;
    top: 25px;
    right: 30px;
}

/* Change cursor when pointing on button */
.gallery-button:hover,
.gallery-button:focus {
    text-decoration: none;
    cursor: pointer;
}

/* 100% image width on smaller screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

Currently the close button is in the top right corner of the whole page and the previous and next buttons already centered vertically (which is good), but not yet near the image. How can I kind of attach the buttons to the image. Sizing the image was kind of hard and I have no idea how I can do it in a different way, so that I can put the sized image and the buttons in a div.

Upvotes: 1

Views: 460

Answers (1)

Anwar Hossen
Anwar Hossen

Reputation: 584

I have ruled out your CSS. Because it's really messy. But If you check this code below, you could understand how to set positioning. Hope you can do the rest of the work.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #modal-content{
      position: relative;
      width:50%;
      height:50%;
    }
    #modal-image{
      width:100%;
      height:auto;
    }
    #close{
      position: absolute;
      right: 0px;
      top: 0px;
    }
    #previous{
      position: absolute;
      top: 50%;
      left: 1%;
      
    }
    #next{
      position: absolute;
      top: 50%;
      right: 1%;
      
    }
  </style>
</head>
<body>
  <div class="modal" id="modal">
    <div id="modal-content">
        
        
        <img id="modal-image" src="https://dummyimage.com/vga" alt="">
        <span class="gallery-button" id="close">✖</span>
        <span class="gallery-button" id="previous">◄</span>
        <span class="gallery-button" id="next">►</span>
        
    </div>
</div>
<script>
  function showModal(directory, response, i) {
    modal.style.display = "block";
    modalImg.src = document.getElementById(path(directory, response[i])).src;

    /* previousButton.style.display = "block"; */
    /* nextButton.style.display = "block"; */
}
</script>
</body>
</html>

Update code (as a requirement)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #modal{
          width:100vw;
          height: 100vh;
      }
    #modal-content{
      position: relative;
      width:35%;
      height:90%;
    }
    #modal-image{
      width:100%;
      height:100%;
    }
    #close{
      position: absolute;
      right: 0px;
      top: 0px;
    }
    #previous{
      position: absolute;
      top: 50%;
      left: 1%;
      
    }
    #next{
      position: absolute;
      top: 50%;
      right: 1%;
      
    }
  </style>
</head>
<body>
  <div class="modal" id="modal">
    <div id="modal-content">
        
        
        <img id="modal-image" src="https://dummyimage.com/vga" alt="">
        <span class="gallery-button" id="close">✖</span>
        <span class="gallery-button" id="previous">◄</span>
        <span class="gallery-button" id="next">►</span>
        
    </div>
</div>
<script>
  function showModal(directory, response, i) {
    modal.style.display = "block";
    modalImg.src = document.getElementById(path(directory, response[i])).src;

    /* previousButton.style.display = "block"; */
    /* nextButton.style.display = "block"; */
}
</script>
</body>
</html>

Upvotes: 1

Related Questions