Implement lightbox to existing project

  css, html, javascript, lightbox

This will be a long question, sorry about that but im new to hmtl/css/js and still trying to learn, im trying to implement lightbox for my photos that i am fetching from pexels with an API, I wanna implement lightbox so when i click the pictures it shows bigger etc, I would really appreciate the help I hope its not too much, code is coming here, if you need anything else just let me know:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Kavivanar&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster+Two:[email protected];1&display=swap" rel="stylesheet">
  <title>Pexels API - Robin Tranberg</title>
  <link rel="stylesheet" href="./lightboxTest.css">
</head>
<!--
  - Basic HTML index, if you hover over the Gallery text you will see another text that says "Return to start". 
  - When you hover over pictures there is a text to let you know that if you click the picture you get the original size. 
  - Getting a search icon from ionicons in one of the script tags.
  - Having some links to my social media, thinking that if this was a real company the users could visit.
-->
<body> 
  <section>
    <div class="container">
      <ul>
        <span title="Visit our Instagram page!"><li><a href="https://www.facebook.com/myName" target="_blank"><i class="fab fa-facebook" aria-hidden="true"></i></a></li></span>
        <span title="Visit our Instagram page!"><li><a href="https://twitter.com/myName" target="_blank"><i class="fab fa-twitter" aria-hidden="true"></i></a></li></span>
        <span title="Visit our Instagram page!"><li><a href="https://www.instagram.com/myName/" target="_blank"><i class="fab fa-instagram" aria-hidden="true"></i></a></li></span>
        <span title="Contact"><li><a href="contact.html"><i class="fas fa-id-card-alt" aria-hidden="true"></i></a></li></span>
        <!-- <span title="Contact"><li><a href="contact"><i class="contact" aria-hidden="true">@</i></a></li></span> -->
      </ul>
      <div class="header">
        <span title="Return to start"><h1 class="logo">G a l l e r y</h1></span>
        <form>
          <input type="text" placeholder="Search Photos">
          <ion-icon name="search-outline"></ion-icon>
        </form>
      </div>
      <span title="Click on picture to see original size"><div class="gallery"></span></div>
      <span title="Load more pictures"><a class="load-more data-img='curated'">View More</a></span>
    </div>
  </section>
  <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
  <script src="./main.js"></script>
  <script src="./newTab.js"></script>
</body>

</html>

Here is the css:

@import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected];900&display=swap");
/* Asterix means: Select all elementes and set the properties inside of the curly brackets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Montserrat", sans-serif;
  font-size: 100%;
}

body {
  background-color: gray;
}


/* Properties for my social media contacts aswell contact icon. */
ul {
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  text-decoration: none;

}

ul li {
  list-style: none;
}

ul li a {
  position: relative;
  width:60px;
  height:60px;
  display:block;
  text-align:center;
  margin:0 10px;
  border-radius: 50%;
  padding: 6px;
  text-decoration:none;
  box-shadow: 0 10px 15px rgba(0,0,0,0.3);
  background: linear-gradient(0deg, #ddd, #fff);
  transition: .5s;
}


ul li a:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  text-decoration:none;
}

ul li a .fab {
  width: 100%;
  height:100%;
  display: inline-block;
  background: linear-gradient(0deg, #fff, #ddd);
  border-radius: 50%;
  line-height: calc(60px - 12px);
  font-size:24px;
  color: #262626;
  transition: .5s;
}
ul li a .fas {
  width: 100%;
  height:100%;
  display: inline-block;
  background: linear-gradient(0deg, #fff, #ddd);
  border-radius: 50%;
  line-height: calc(60px - 12px);
  font-size:24px;
  color: #262626;
  transition: .5s;
}

/* Child is the different icons, number 1 is facebook, 2 twitter and so on. */
ul li:nth-child(1) a:hover .fab {
  color: #3b5998;
}

ul li:nth-child(2) a:hover .fab {
  color: #00aced;
}

ul li:nth-child(3) a:hover .fab {
  color: #e4405f;
}


img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 100px 0;
}
/* Containing pretty much everything you see on the site, can you call it a wrapper?? */
.container {
  background-color: lightgray;
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0px 0px 61px 7px #5e849c40;
  padding: 50px 20px;
  border-radius: 20px;
  text-align: center;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.header h1 {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -2px;
}

/* For the search section */
form {
  margin-top: 30px;
  width: 80%;
  max-width: 300px;
  position: relative;
}

/* Input box properties, where the user can search for photos */
input {
  border: none;
  border-bottom: 2px solid gray;
  font-size: 20px;
  width: 100%;
  outline: none;
  color: black;
  background-color: transparent;
  position: relative;
}

/* Placeholder properties, in this case "Search Photos" */
input::placeholder {
  opacity: 0.5;
  color: black;
  font-family: "Montserrat";
}

/* Ionicon properties which is the magnifying glass in the search box */
form ion-icon {
  position: absolute;
  right: 0;
  font-size: 20px;
  opacity: 0.5;
  color: black;
}

/* Properties of gallery logo */
.logo
{
  color: black;
  transition: 0.3s ease;
  font-family: 'Kavivanar', cursive;
}

/* Gallery logo hovering effects */
.logo:hover
{
  color: darkgray;
  text-shadow: 2px 2px black;
}

.gallery{
    display: grid;
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    grid-gap: 10px;
    height: 100vh;
}
img{
    cursor: pointer;
    width: 200px;
    height: 200px;
}

#item {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, .8);
    display: none;
}

#item.active{
    display: flex;
    justify-content: center;
    align-items: center;
}

And here is the JS:

 class PhotoGallery
{
    //Constructor containing my selectors
    constructor()
    {
        this.API_KEY = '563492ad6f917000010000013a6f79bdd68a47199caa701bab553adf';
        // The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
        this.galleryDIv = document.querySelector('.gallery');
        this.searchForm = document.querySelector('.header form');
        this.loadMore = document.querySelector('.load-more');
        this.logo = document.querySelector('.logo');
        this.pageIndex = 1;
        this.searchValueGlobal = '';
        this.eventHandle();
    }
    //Eventhandler, eg when the DOMContent is loaded I wanna retrieve the pictures from my API_KEY
    eventHandle()
    {
        document.addEventListener('DOMContentLoaded', () => {
            this.getImg(1);
        });
        this.searchForm.addEventListener('submit', (e) => {
            this.pageIndex = 1;
            this.getSearchedImages(e);
        });
        this.loadMore.addEventListener('click', (e) => {
            this.loadMoreImages(e);
        });
        this.logo.addEventListener('click', () => {
            this.pageIndex = 1;
            this.galleryDIv.innerHTML = '';
            this.getImg(this.pageIndex);
        });
    }
    //Getting images from my API_KEY by calling the function fetchImages.
    async getImg(index){
        this.loadMore.setAttribute('data-img', 'curated');
        const baseURL = `https://api.pexels.com/v1/curated?page=${index}&per_page=12`;
        const data = await this.fetchImages(baseURL);
        this.GenerateHTML(data.photos);
        console.log(data);
    }
    //Fetching the images from my API_KEY
    async fetchImages(baseURL){
        const response = await fetch(baseURL,{
            method: 'GET',
            headers:{
                Accept: 'application/json',
                Authorization: this.API_KEY
            }
        });
        const data = await response.json();
        return data;
    }
            // the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.
    GenerateHTML(photos){
        photos.forEach(photo=>{
            const item = document.createElement('div');
            item.classList.add('item');
            item.innerHTML = `
            <a href='${photo.src.original}' target="_blank"></a>
            <img src="${photo.src.medium}">
            <h3>${photo.photographer}</h3>
            </a>
            `;
            this.galleryDIv.appendChild(item);
        })
    }
    async getSearchedImages(e){
        this.loadMore.setAttribute('data-img', 'search');
        // preventDefault method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.
        e.preventDefault();
        this.galleryDIv.innerHTML = '';
        const searchValue = e.target.querySelector('input').value;
        this.searchValueGlobal = searchValue;
        const baseURL = `https://api.pexels.com/v1/search?query=${searchValue}&page=1&per_page=12`;
        const data = await this.fetchImages(baseURL);
        this.GenerateHTML(data.photos)
        e.target.reset();
    }
    async getMoreSearchedImages(index){
        const baseURL = `https://api.pexels.com/v1/search?query=${this.searchValueGlobal}&page=${index}&per_page=12`;
        const data = await this.fetchImages(baseURL);
        console.log(data);
        this.GenerateHTML(data.photos)
    }
    loadMoreImages(e){
        let index = ++this.pageIndex;
        // The getAttribute() method of the Element interface returns the value of a specified attribute on the element. 
        // If the given attribute does not exist, the value returned will either be null or "" (the empty string);
        const loadMoreData = e.target.getAttribute('data-img');
        if(loadMoreData === 'curated')
        {
            this.getImg(index)
        }
        else
        {
            this.getMoreSearchedImages(index);
        }
    }
}
//Creating a new instance of the PhotoGallery
const gallery = new PhotoGallery;

Source: Ask Javascript Questions

LEAVE A COMMENT