Image Gallery

image-gallery.markdown

Image Gallery

A Pen by Geoffrey Buell on CodePen.

License.

index.html

<div class="container">
    <div class="img-grid">
      <div class="img-box">
        <img 
          class="img-timg"
          src="https://cdn.pixabay.com/photo/2018/02/21/05/17/cat-3169476_1280.jpg" 
          alt="Black kitten on mossy cement brick path"
        >
      </div>
      <div class="img-box">
        <img 
          class="img-timg"
          src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" 
          alt="Profile of a gray cat looking upwards"
        >
      </div>
      <div class="img-box">
        <img 
          class="img-timg"
          src="https://images.pexels.com/photos/1084425/pexels-photo-1084425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" 
          alt="White cat with green eyes on a white background"
        >
      </div>
      <div class="img-box">
        <img 
          class="img-timg"
          src="https://images.pexels.com/photos/669015/pexels-photo-669015.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" 
          alt="Cat profile in the sunlight"
        >
      </div>
      <div class="img-box">
        <img 
          class="img-timg"
          src="https://images.pexels.com/photos/1576193/pexels-photo-1576193.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" 
          alt="Cat yawning with mouth wide open"
        >
      </div>
      <div class="img-box">
        <img 
          class="img-timg"
          src="https://images.pexels.com/photos/399647/pexels-photo-399647.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" 
          alt="Tabby cat with open mouth smile and wild look on its face"
        >
      </div>
      <div class="img-box">
        <img 
          class="img-timg"
          src="https://images.pexels.com/photos/225406/pexels-photo-225406.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" 
          alt="Curious short fur cat close up"
        >
      </div>
      <div class="img-box">
        <img 
          class="img-timg"
          src="https://images.pexels.com/photos/54632/cat-animal-eyes-grey-54632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" 
          alt="Curious gray cat close up"
        >
      </div>
      <div class="img-box">
        <img 
          class="img-timg"
          src="https://images.pexels.com/photos/302280/pexels-photo-302280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" 
          alt="Black cat outside with snowflakes on its fur"
        >
      </div>
    </div>

    <div class="modal">
      <span class="close">&times;</span>
      <span class="previous">&#8249;</span>
      <span class="next">&#8250;</span>
      <img 
        class="modal-content"
        src="" 
        alt=""
      >
      <div class="caption"></div>
    </div>
  </div>

script.js

document.addEventListener('DOMContentLoaded', () => {

  const images = document.querySelectorAll('.img-timg'),
        modal = document.querySelector('.modal'),
        content = document.querySelector('.modal-content'),
        closeBtn = document.querySelector('.close'),
        prevBtn = document.querySelector('.previous'),
        nextBtn = document.querySelector('.next'),
        caption = document.querySelector('.caption');

  let imgIndex;

  const openModal = () => {
    modal.style.display = 'block';
  }

  const closeModal = () => {
    modal.style.display = 'none';
  }

  const displayImg = () => {
    if (imgIndex > images.length - 1) { imgIndex = 0 };
    if (imgIndex < 0) { imgIndex = images.length - 1 };
    content.src = images[imgIndex].src;
    content.alt = images[imgIndex].alt;
    caption.textContent = images[imgIndex].alt;
  }  

  for (let i = 0; i < images.length; i++) {
    images[i].addEventListener('click', () => {
      imgIndex = i;
      openModal();
      displayImg();
    });
  }

  closeBtn.addEventListener('click', () => closeModal());

  prevBtn.addEventListener('click', () => {
    imgIndex--;
    displayImg();
  });

  nextBtn.addEventListener('click', () => {
    imgIndex++;
    displayImg();
  });

  document.addEventListener('keyup', (e) => {
    if (e.key === 'Escape') {
      closeModal();
    }
  });

  document.addEventListener('keyup', (e) => {
    if (e.key === 'ArrowLeft') {
      imgIndex--;
      displayImg();
    }
  });

  document.addEventListener('keyup', (e) => {
    if (e.key === 'ArrowRight') {
      imgIndex++;
      displayImg();
    }
  });

});

style.scss

* {
  margin: 0;
  padding: 0;
}

body {
  color: teal;
  font-size: 2rem;
  background: #07252e;
}

.container {
  padding: 1rem;
  .img-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    grid-gap: 1rem;
    .img-box {
      width: 100%;
      height: 100%;
      border-radius: 0.5rem;
      border: 0.1rem solid teal;
      box-sizing: border-box;
      overflow: hidden;
      .img-timg {
        width: 100%;
        height: calc(100% + 1rem);
        object-fit: cover;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    padding-top: 3rem;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.9);
    .close, .previous, .next {
      position: absolute;
      color: gray;
      opacity: 0.7;
      user-select: none;
      &:hover {
        cursor: pointer;
        opacity: 1;
        transition: 200ms ease-in;
      }
    }
    .close {
      font-size: 3rem;
      font-weight: bold;
      top: 1rem;
      left: 2rem;
    }
    .previous {
      font-size: 4rem;
      top: 37%;
      left: 2rem;
    }
    .next {
      font-size: 4rem;
      top: 37%;
      right: 2rem;
    }
    .modal-content {
      margin: auto;
      display: block;
      width: auto;
      height: 80%;
      border: 0.1rem solid teal;
      border-radius: 0.5rem;
    }
    .caption {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 1rem;
      font-style: italic;
      text-align: center;
      color: gray;
      margin-top: 1rem;
    }
  }
}

@media (max-width: 1100px) {
  .container {
    .modal {
      .previous, .next {
        display: none;
      }
    }
  }
}

@media (max-width: 1024px) {
  .container {
    padding: 0;
    .modal {
      .modal-content {
        width: 96%;
        height: auto;
        margin-top: 2rem;
      }
    }
  }
}