How To Make A Photo Gallery In HTML,CSS And JAVASCRIPT Code

How To Make A Photo Gallery In HTML,CSS And JAVASCRIPT Code

Hello, Coders. In this article, we will make an image gallery. This Photo gallery will contain a number of images that would appear similar in a standard gallery. Using HTML and CSS, we will create a stunning responsive photo gallery website.

All of the images in this Image Gallery will be displayed in a small size, and when you click on any of them, the full size of that image will be displayed, and you can zoom in and out of the picture using the mouse wheel.

This project will teach you how to add multiple images to a webpage as well as how to make the page responsive.
I hope you must have got an idea about the project.

Let’s have a look at our project Photo Gallery.👇

Photo Gallery In HTML,CSS And JAVASCRIPT
Photo Gallery In HTML,CSS And JAVASCRIPT

Before the code, you just need to add the following link in your HTML file for the fonts:

Font link click here

Keep note that you must add this link under the head tag .

Step1: Lets Start with adding some Basic HTML for our photo gallery

The HTML is hypertext markup language is the main structure of our webpage which will help us to display our content to the browser.

All the HTML document must start with <!doctypehtml> this helps the browser to understand the code written follows the lastest HTML format.

The HTML document itself begin With <html> and end with </html>.

The content that will be displayed in the brower comes under the body section <body></body>.Inside the body tag main content lies.

JQuery Vertical Carousel Using HTML,CSS And JAVASCRIPT Code

Here I will add the structure of the HTML code from scratch.

Our HTML contains the following part :

  • The main content of our HTML code is present in the div tag which contain our image.
  • The img tag with class(m-p-g_thumbs-img).
  • We have another div tag, which helps to see the image in full size.

Go through the below 👇 code and paste in your IDE :

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Photos Material Gallery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="m-p-g">
    <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
        <img src="http://unsplash.it/600/400?image=940" data-full="http://unsplash.it/1200/800?image=940" class="m-p-g__thumbs-img" />
        <img src="http://unsplash.it/640/450?image=906" data-full="http://unsplash.it/1280/900?image=906" class="m-p-g__thumbs-img" />
        <img src="http://unsplash.it/550/420?image=885" data-full="http://unsplash.it/1100/840?image=885" class="m-p-g__thumbs-img" />
        <img src="http://unsplash.it/650/450?image=823" data-full="http://unsplash.it/1300/900?image=823" class="m-p-g__thumbs-img" />
        <img src="http://unsplash.it/600/350?image=815" data-full="http://unsplash.it/1200/700?image=815" class="m-p-g__thumbs-img" />
        <img src="http://unsplash.it/560/500?image=677" data-full="http://unsplash.it/1120/1000?image=677" class="m-p-g__thumbs-img" />
        <img src="http://unsplash.it/670/410?image=401" data-full="http://unsplash.it/1340/820?image=401" class="m-p-g__thumbs-img" />
        <img src="http://unsplash.it/620/340?image=623" data-full="http://unsplash.it/1240/680?image=623" class="m-p-g__thumbs-img" />
        <img src="http://unsplash.it/790/390?image=339" data-full="http://unsplash.it/1580/780?image=339" class="m-p-g__thumbs-img" />
    </div>

    <div class="m-p-g__fullscreen"></div>
</div>

<script>
    var elem = document.querySelector('.m-p-g');

    document.addEventListener('DOMContentLoaded', function() {
        var gallery = new MaterialPhotoGallery(elem);
    });
</script>
<!-- partial -->
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/material-photo-gallery.min.js'></script>
</body>
</html>

Preview without Styling Photo Gallery:

Photo Gallery In HTML,CSS And JAVASCRIPT
Photo Gallery In HTML,CSS And JAVASCRIPT

 

Before the code, you just need to add the CSS link to our HTML file so that we add styling to our website:

<link rel="stylesheet" href="./style.css">

 

Keep note that you must add this link under the head tag .

Step2: Adding the CSS Code For Photo Gallery

By CSS we will design our main container and will provide maximum width  and then we will style each and every image and will give some transition to our images and also we provided the hover effect to our images.
The Below code will analyze you more👇. So just add in your HTML half-complete file and wait to watch some magic.
/*------------------------------------*\
 MATERIAL PHOTO GALLERY
 \*------------------------------------*/
.m-p-g {
  max-width: 100%;
  margin: 0 auto;
}
.m-p-g__thumbs-img {
  margin: 0;
  float: left;
  vertical-align: bottom;
  cursor: pointer;
  z-index: 1;
  position: relative;
  opacity: 0;
  filter: brightness(100%);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  will-change: opacity, transform;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.m-p-g__thumbs-img.active {
  z-index: 50;
}
.m-p-g__thumbs-img.layout-completed {
  opacity: 1;
}
.m-p-g__thumbs-img.hide {
  opacity: 0;
}
.m-p-g__thumbs-img:hover {
  filter: brightness(110%);
}
.m-p-g__fullscreen {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  transition: background 0.25s ease-out, visibility 0.01s 0.5s linear;
  will-change: background, visibility;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.m-p-g__fullscreen.active {
  transition: background 0.25s ease-out, visibility 0.01s 0s linear;
  visibility: visible;
  background: rgba(0, 0, 0, 0.95);
}
.m-p-g__fullscreen-img {
  pointer-events: none;
  position: absolute;
  transform-origin: left top;
  top: 50%;
  left: 50%;
  max-height: 100vh;
  max-width: 100%;
  visibility: hidden;
  will-change: visibility;
  transition: opacity 0.5s ease-out;
}
.m-p-g__fullscreen-img.active {
  visibility: visible;
  opacity: 1 !important;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease-out;
}
.m-p-g__fullscreen-img.almost-active {
  opacity: 0;
  transform: translate3d(0, 0, 0) !important;
}
.m-p-g__controls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  height: 20vh;
  background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.m-p-g__controls.active {
  opacity: 1;
  visibility: visible;
}
.m-p-g__controls-close, .m-p-g__controls-arrow {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
}
.m-p-g__controls-close:focus, .m-p-g__controls-arrow:focus {
  outline: none;
}
.m-p-g__controls-arrow {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 20%;
  height: 100vh;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  opacity: 0;
}
.m-p-g__controls-arrow:hover {
  opacity: 1;
}
.m-p-g__controls-arrow--prev {
  left: 0;
  padding-left: 3vw;
  justify-content: flex-start;
}
.m-p-g__controls-arrow--next {
  right: 0;
  padding-right: 3vw;
  justify-content: flex-end;
}
.m-p-g__controls-close {
  position: absolute;
  top: 3vh;
  left: 3vw;
  z-index: 5;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.m-p-g__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  transition: all 0.25s ease-out;
}
.m-p-g__btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.m-p-g__alertBox {
  position: fixed;
  z-index: 999;
  max-width: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 25px;
  border-radius: 3px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
  color: grey;
}
.m-p-g__alertBox h2 {
  color: red;
}
/* DEMO */
body {
  background: #fefefe;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-family: 'Roboto Mono';
}
h2 {
  font-weight: 300;
  margin: 4vh 4vw;
  letter-spacing: 3px;
  color: grey;
  text-transform: uppercase;
}
.demo-btn {
  display: inline-block;
  margin: 0 2.5px 4vh 2.5px;
  text-decoration: none;
  color: grey;
  padding: 15px;
  line-height: 1;
  min-width: 140px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 6px;
}
.demo-btn:hover {
  background: rgba(0, 0, 0, 0.12);
}
@media (max-width: 640px) {
  .demo-btn {
    min-width: 0;
    font-size: 14px;
  }
}

Preview after adding the style Photo Gallery:

 

Photo Gallery In HTML,CSS And JAVASCRIPT
Photo Gallery In HTML,CSS And JAVASCRIPT

Step3: Adding the Javascript Code For Photo Gallery

We just used script tag in our HTML file to add our javascript .In javascript part , We just initialised a variable  which selects our element with its class name and then we just added an eventlistener domcontentloaded as the content loads up  we  callback a function where we  creates a variable .

 

A  preview of our project is attached below 👇:

Final Output For Photo Gallery

Now, as you can see in the output, we have created an Photo gallery using HTML, CSS, and JavaScript which will help you to create some small website projects.

100+ Front-end Projects for Web developers (Source Code)

Now I’m looking for your reviews.

So, How was the blog 😁, Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊
I hope I was able to make you understand this project and you learned something new from this blog. If you had any problems, please leave a comment with your problems, and if you liked it, please show your appreciation in the comment section. This inspires bloggers to create new blogs.
Written by : @Arun
Code by : @Ettrics
Share on:

1 thought on “How To Make A Photo Gallery In HTML,CSS And JAVASCRIPT Code”

Leave a Comment