Arranging buttons beside an image

Question

Arranging buttons beside an image

I had previously inquired about a similar issue, but I've since made some style changes and now I'm unsure of how to position the close button in the top-right corner of the image, along with the previous and next buttons on either side of the image with specific spacing.

This is just above 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 display 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 CSS styling:

/* Background when the image is displayed */
#modal {
    display: none; /* Hidden by default */
    /* Positioning */
    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 with 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;
    /* Horizontal center image */
    margin: auto;
    /* Zoom (image enlarges) on open */
    animation-name: zoom;
    animation-duration: 0.6s;
    /* Vertical 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;
    /* Make 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 hovering over button */
.gallery-button:hover,
.gallery-button:focus {
    text-decoration: none;
    cursor: pointer;
}

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

Currently, the close button is positioned in the top right corner of the entire page, and the previous and next buttons are already vertically centered (which is good), but not yet aligned near the image. How can I attach these buttons to the image so that they move with it? Adjusting the image size was challenging, and I am uncertain of an alternative approach to accommodate both the sized image and buttons within a div.

javascript html css position

Answer 1

Answer №1

I have eliminated the CSS you provided as it appears to be disorganized. However, by reviewing the code snippet below, you can gain insight on how positioning is set. I trust you will be able to complete the remaining tasks.

<!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>

Answer 2

I have eliminated the CSS you provided as it appears to be disorganized. However, by reviewing the code snippet below, you can gain insight on how positioning is set. I trust you will be able to complete the remaining tasks.

<!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>

Arranging buttons beside an image

Answer №1

Similar questions

Manipulating object information within a nested for loop

The error message indicates that the property 'current' is not found in the type '[boolean, Dispatch<SetStateAction<boolean>>]'

Calculating the computed width based on flex-basis at 0% and the flex-grow factor: what's the deal

CSS printing displays a blank bar in white color

The embedded iframe on YouTube is displaying the incorrect video

Ways to retrieve PHP variables using JavaScript from an external file

Adjust the cursor style using Javascript

The viewport width in NextJS does not extend across the entire screen on mobile devices

TypeORM ensures that sensitive information, such as passwords, is never returned from the database when retrieving a user

Adjust the background color dynamically as you scroll, given that I am using a linear-gradient

Fetch information post search action through Ajax on a single PHP page

What is the correct way to send a GET request in angular?

Utilize Tailwind CSS to design a triangular shape positioned in the lower right corner of the parent div

Add United States as an additional attribute to the countries retrieved from the API

One way to achieve the same functionality as onclick in an Ajax call using

Increasing Gap between Tabs in Primefaces AccordionPanel: A Guide

Troubleshooting React-Redux: Button click not triggering action dispatch

Scrolling to an id element in Vue.js can be achieved by passing the ID in the URL using the "?" parameter. This

When dynamically adding input data, the serialized array may not successfully pass through Ajax

Callback function not being triggered in Jquery's getJson method