Gallery

by NullDev

HTML

<!DOCTYPE html>
<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>AirRental</title>
	</head>
<body>
		<section class="gallery">
			<ul class="aircrafts">
				<li><img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmV8ZW58MHx8MHx8&w=1000&q=80" alt="" /></li>
				<li><img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmV8ZW58MHx8MHx8&w=1000&q=80" alt="" /></li>
				<li><img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmV8ZW58MHx8MHx8&w=1000&q=80" alt="" /></li>
				<li><img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmV8ZW58MHx8MHx8&w=1000&q=80" alt="" /></li>
				<li><img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmV8ZW58MHx8MHx8&w=1000&q=80" alt="" /></li>
			</ul>
		</section>
</body>

CSS

.gallery {
	display: flex;
	justify-content: center;
	background-color: #1d437e;
	padding: 0 20px 60px 20px;
}

.aircrafts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: 20px;
	grid-column-gap: 20px;
}

.aircrafts li:first-child {
	grid-row: span 2;
}

.fullscreen {
	width: 100vw;
	height: 100vh;
	position: fixed;
	display: block;
	background: rgba(0, 0, 0, 0.8);
	margin: 0 auto;
	top: 0;
	left: 0;
	padding: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

JavaScript

class ImgClick {
    constructor(galleryImg) {
		    this.imgs = document.querySelectorAll(galleryImg);
	  }

	  #enlargeImg(img, index) {
		  	let bigImg = document.createElement("div");
			  bigImg.classList.add('fullscreen');
			  bigImg.innerHTML = `<img src="${img.getAttribute("src")}">`;
			  document.documentElement.appendChild(bigImg);
	  }

	  init() {
		    this.imgs.forEach((img, index) => {
			      img.addEventListener("click", e => this.#enlargeImg(img, index));
		    });
        document.addEventListener("click", e => {
            if (e.target.matches(".fullscreen, .fullscreen *")){
                document.querySelector("div.fullscreen").remove();
            }
        });
	  }
}

let imgClick = new ImgClick(".aircrafts li img");
imgClick.init();