title: In a gallery of images,whenever I click on a image display with fullscreen and it should contain a button with 'X' that brings back to gallery
body: <p>I am unable to display the image on fullscreen and can't get back to gallery images. Is it possible to do this with Javascript.I tried many ways to display the image with full screen but I wasn't successful, I can display the image on the same page, but can't display with fullscreen. How to display with fullscreen and how can I include a button to get back to my gallery. I came across many solutions with jquery. Is it can be done with Js?? Please help me with this question.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div class="image-gallery-items"&gt;
        &lt;div class="image-gallery-item"&gt;
            &lt;a href="#"
            class="thumbnail"&gt;
            &lt;img  src="images/img.png"
            onclick="imgDisplay(this);"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="image-gallery-item"&gt;
          &lt;a href="" class="thumbnail"&gt;
            &lt;img
              src="images/img1.png" onclick="imgDisplay(this);"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  &lt;/div&gt;
   &lt;div class="container"&gt;
        &lt;span onclick="this.parentElement.style.display='none'" class="closebtn"&gt;&amp;times&lt;/span&gt;
        &lt;img id="fullImg" &gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>index.css</strong></p>
  
  <pre><code>.image-gallery-items{
  display: flex;
  margin:auto 0px;
  flex-wrap: wrap;
  overflow: auto;
  clear: both;
  overflow:scroll;
  @include clearfloats;
     }
  
  .image-gallery-item{
          float:left;
          position: relative;
  
      .thumbnail{
          display: block;
          overflow: hidden;
          .closebtn{
              position: absolute;
              top: 10px;
              right: 15px;
              color: white;
              font-size: 35px;
              cursor: pointer;
              }
          img{
          width: 190px;
          height: auto;
          padding: 5px;
            }
         }
      }
    .container{
   position: relative;
       }
    #fullImg{
       width:100%;
      height:100%;
      object-fit: cover;
          }
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>function imgDisplay(img){
  
  var fullImg=document.getElementById('fullImg');
  fullImg.src=img.src;
  fullImg.style.display="block";
  </code></pre>
  
  <p>}</p>