Image Changer

image-changer.markdown

Image Changer

A Pen by Matthew Orndoff on CodePen.

License.

index.pug

div(class='container')
  div(class='main--img')
    img(src='https://image.ibb.co/cTfhsy/galaxy.jpg' alt='galaxy' class='active')
  div(class='images')
    img(src='https://image.ibb.co/cTfhsy/galaxy.jpg' alt='')
    img(src='https://image.ibb.co/d0rizd/galaxy_arc.jpg' alt='')
    img(src='https://image.ibb.co/iP1BkJ/spaceman.jpg' alt='')

script.babel

const doc = document; 
const currentImg = doc.querySelector('.active')
const imgs = doc.querySelectorAll('.images img'); 
const imgOpacity = 0.5; 

imgs[0].style.opacity = imgOpacity; 

let thumbPointer = imgs[0]; 

// Loop through images, add click event
imgs.forEach( img => img.addEventListener('click', clickImage)); 

function clickImage(e){
   // same pic selected
   if(e.target === thumbPointer) return; 
   
   // Change curr image to src of clicked image
   currentImg.src = e.target.src; 
   // Add fade in class
   currentImg.classList.add('image-fade'); 
   // Change opacity
   e.target.style.opacity = imgOpacity; 
   // Reset opacity of last thumbnail
   thumbPointer.style.opacity = 1; 
   // Update thumb Pointer
   thumbPointer = e.target; 
   
// Remove fade-in class 
setTimeout(() => currentImg.classList.remove('image-fade'), 500); 
}

style.scss

body {
   margin: 25px; 
   padding: 0;
   // background: #000;
}

.container {
   max-width: 900px;
   margin: auto; 
   border: 4px solid #333;
}

.main--img img, 
.images img {
   width: 100%;
   cursor: pointer; 
   transition: 0.8s; 
}

.images {
   display: grid; 
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 4px; 
}

.images img:hover {
   opacity: 0.8 !important; 
   transition: 0.8s;
}
@keyframes fadeIn {
   to {
      opacity: 1; 
   }
}

.image-fade {
   opacity: 0; 
   animation: fadeIn 0.6s 1 forwards; 
}