CODEWITHSUNDEEP
javascripthtmlcsssimplemodal
MaDragon7
MaDragon7

Reputation: 1313

How to append an image to a viewer then remove it from viewer without removing it from the main container without jquery?

I'm trying to make a simple gallery with a modal viewer. Almost there but 2 simple problems confuse my little brain and can't figure them out.

problem 1- why does it work for the first image only?

problem 2- how to un append the image from the viewer so it will show again where it was? I know it will work if I create the image as a new item and then append it, but I can't figure this out.

let img = document.querySelector("img");
let viewer = document.getElementById("viewer");
img.addEventListener("click" , viewImg);

function viewImg() {
    
    if (viewer.style.visibility = "hidden") {
        
        viewer.appendChild(img);
        img.style.width = "60%";
        viewer.style.visibility = "visible";
    }
}

function closeViewer() {

    if (viewer.style.visibility = "visible") {
    viewer.style.visibility = "hidden";
    viewer.removeChild(img);
    }
}
.container {
    line-height: 0;
    column-count: 3;
    column-gap: 0;
    column-fill: balance;
  }
  
  .container img {
    width: 100%;
  }
  
  .container img:hover {
    scale: 1.1;
    transition: 0.5s;
    left: 120%;
    cursor: pointer;
  }

  .viewer {
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgb(255, 0, 0, 0.5);

    /* transition: 1s; */
  }

  .closeViewer {
    color: #000;
    background: rgb(255, 255, 255, 0.5);
    position: absolute;
    top: 100px;
    right: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    padding: 0 10px;
    cursor: pointer;
  }
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>simple gallery</title>
    <link rel="stylesheet" href="test.css">
  
    
</head>

<body>
    
    <div class="container" id="container">

        <!-- onclick="viewImg()" -->
            <img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
            <img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
            <img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
            <img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
        

        
            <img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
            <img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
            <img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
    
    </div>

  
  
    <div class="viewer" id="viewer">
        <button class="closeViewer" id="closeViewer" onclick="closeViewer()">X</button>
    </div>

    <script src="./test.js"></script>
</body>

</html>

Upvotes: 0

Views: 140

Answers (1)

zer00ne
zer00ne

Reputation: 44086

The reason why only the first <img> worked and none of the other ones did is because .querySelector() selects the first <img class='img'> it finds and then stops. Then when the modal is closed the appended image is permanently removed from the whole page so nothing works after that.

You need to bind the event handler to an parent tag of all of those <img> and then single out the <img> you clicked by using e.target. In the example <dialog> element is used instead of a plain <div>.

Details are commented in example

// Reference <dialog>, <figure>, <section>, and <button>
const viewer = document.querySelector(".viewer");
const frame = document.querySelector('.frame');
const gallery = document.querySelector('.gallery');
const close = document.querySelector('.close');

// Bind the click event to the parent tag of all of the <img>
gallery.addEventListener("click", viewImg);
// Bind the click event to the <button>
close.onclick = closeViewer;

// Event handler passes Event Object by default
function viewImg(e) {
  // Reference the tag user clicked
  const clk = e.target;
  /*
  If the user clicked an <img class='img'>...
  ...open <dialog>...
  ...make a clone of the clicked <img>
  ...then add the clone to <figure>
  */
  if (clk.matches('.img')) {
    viewer.showModal();
    let copy = clk.cloneNode(true);
    frame.append(copy);
  }
}

// Close <dialog> and remove the clone from <figure>
function closeViewer(e) {
  viewer.close();
  frame.replaceChildren();
}
.gallery {
  line-height: 0;
  column-count: 3;
  column-gap: 0;
  column-fill: balance;
}

img {
  width: 100%;
  cursor: pointer;
}

.viewer {
  position: relative;
  width: 75%;
  overflow: hidden;
}

.close {
  color: #000;
  background: rgb(255, 255, 255, 0.5);
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 3rem;
  padding: 0 10px;
  cursor: pointer;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>simple gallery</title>
</head>

<body>
  <section class="gallery">
    <img class="img" src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
    <img class="img" src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
    <img class="img" src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
    <img class="img" src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
    <img class="img" src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
    <img class="img" src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
    <img class="img" src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
    <img class="img" src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
    <img class="img" src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
    <img class="img" src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
    <img class="img" src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
    <img class="img" src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
  </section>

  <dialog class="viewer">
    <button class="close">X</button>
    <figure class='frame'></figure>
  </dialog>
</body>

</html>

Upvotes: 0

Related Questions