Today #Day139 of #365DaysOfCode, I am Building Responsive Filterable Image Gallery using HTML CSS & JavaScript.

Creating fullscreen image preview box (HTML & CSS)

Tip: div.preview-box>div.details>span.title>p

<div class="preview-box">
     <div class="details">
        <span class="title">Image Category
            <p>Not defined</p>
         </span>
         <span class="icon fas fa-times"></span>
     </div>
</div>

add the below link for icons,

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

image-box,

<div class="image-box">
                <img src="" alt="">
</div>

Now, styling the preview box,

.preview-box{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  max-width: 700px;
  width: 100%;
  padding: 0 5px 5px 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
  border-radius: 5px;
}
.preview-box .details{
  display: flex;
  align-items: center;
  padding: 13px 15px 13px 10px;
  justify-content: space-between;
}

.preview-box .details .title{
  display: flex;
  font-size: 18px;
  font-weight: 400;
}
.preview-box .details p{
  margin-left: 5px;
  font-weight: 500;
}
.details .icon{
  font-size: 22px;
  cursor: pointer;
}

Then, styling the image box,

.preview-box .image-box{
  display: flex;
  width: 100%;
  border-radius: 0 0 5px 5px;
}
.image-box img{
width: 100%;
}

define a div with class to give the baground a dim effect when viewing box,

<div class="shadow"></div>

styling,

.shadow{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: none;
  background: rgba(0, 0, 0,0.4);
}

Function for Image preview (JS)

define const variables,

const previewBox = document.querySelector(".preview-box"),
      previewImg = document.querySelector("img"),
      closeIcon = document.querySelector(".icon");

adding onclick attribute in all available images,

for (let index = 0; index < filterImg.length; index++) {
    filterImg[index].setAttribute('onclick','preview(this)');
}

add the below css class,

.preview-box.show{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%,-50%) scale(1);
}

full-screen preview image function,

function preview(element) {
  let selectedprevImg = element.querySelector("img").src;
  previewImg.src = selectedprevImg;
  previewBox.classList.add("show");
  closeIcon.onclick = () => {
    previewBox.classList.remove("show");
  };
}

Now, passing the data name to category name,

categoryName.textContent = element.getAttribute('data-name')

Now, add the shadow

.shadow.show{
  display: block;
}

add the show class,

shadow.classList.add("show");

remove the class,

shadow.classList.remove("show");

to prevent user scrolling down when previewing box,

document.querySelector('body').style.overflow = 'hidden'

and once closes preview box,

document.querySelector("body").style.overflow = "scroll";

Conclusion

I finished adding a fullscreen image preview box to the Filterable Image Gallery project.

This brings the project Filterable Image Gallery to a conclusion.

Code

1. code

   

   preview

   

Source: Filter Image Gallery[Link]

Author: Dheeraj.y

Connect with me:

• My Twitter

• My LinkedIn

• My GitHub

• My Hashnode