DEV Community

Cover image for Gallery Grid
Jagadeesh Koyya
Jagadeesh Koyya

Posted on

Gallery Grid

Hey there! I hope you're doing extremely well. Here's to this week's mini project.

Photo Gallery

Let's Start Building

The concept is simple. We're planning on to build a static website hosting a bunch of pictures. This idea is derived from photo gallery which is cool.

The boiler plate consists of html, css, js pages. The root file is index.html

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">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="https://assets.materialup.com/uploads/5f78aab4-7fbc-4eb8-8ac2-755948f9c89d/preview.jpg">
    <title>Grid Gallery</title>
</head>
<body>

    <div class="full-img" id="fullImgBox">
        <img src="img/img1.jpg" id="fullImg" alt="full-img">
        <span onClick = "closeFullImg()">X</span>
    </div>

    <div class="img-gallery">
        <img src="img/img1.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img2.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img3.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img4.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img5.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img6.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img7.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img8.jpg" onClick = "openFullImg(this.src)" alt="img">
        <!-- this.src is passed to the f() when full img is clicked -->
    </div>


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

Enter fullscreen mode Exit fullscreen mode

The html code is pretty simple. All we did was created a div for holding 8 images which will be hosted on our webpage when rendered. Prior to that div, we have another div for full image, which will pop up when any small img is viewed.

CSS

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body{
    background-color: #ecf4fb;
}

.img-gallery{
    width: 80%;
    margin: 6em auto 3em; /* 16px = 1em */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    grid-gap: 2em;
}

.img-gallery img{
    width: 100%;
    cursor: pointer;
    transition: 0.4s;
}

.img-gallery img:hover{
    transform: scale(0.8) rotate(-15deg); 
    border-radius: 20px;
    box-shadow: 0 32px 75px rgba(68, 77, 136, 0.2); 
}

.full-img{
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100; 
}

.full-img img{
    width: 90%;
    max-width: 30em;
}

.full-img span{
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

Enter fullscreen mode Exit fullscreen mode

I believe that the styles I've used here is self-explanatory so I'm gonna go to the script part now.

Script.js

var fullImgBox = document.getElementById('fullImgBox')
var fullImg = document.getElementById('fullImg')

function openFullImg (pic) {
    fullImgBox.style.display = "flex";
    fullImg.src = pic;
}

function closeFullImg() {
    fullImgBox.style.display = "none";
}
Enter fullscreen mode Exit fullscreen mode

Here comes the heart to this gallery grid. So what this script file does is, it has two functions in it, as you can see ofcourse.

openFullImg triggers the clicked image to scale up with the respective styles applied.

closeFullImg when triggered hides the full image by simply mainpulating the display attribute set to none.

Repo ⚡
Live ⚡

That's it for the day my fellow developer. The next time I'll be coming up with real-time webapp where this gallery grid is gonna be customisable to everyone. You can render your own images online! Till then, bye-bye!

Top comments (0)