I. HTML

HTML Mark-up

Let’s start by creating an image which will be shown as a slide by default. Next will be div with image grid inside. The plan is to change src of clicked thumbnail in the gallery to that of the one in a slide.

II. CSS

1.Create the grid of thumbnails

We select the element containing the thumbnails. We use display:grid; for CSS grid properties to work. Ensure a grid of equal and fluid culumns using grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); , this will automatic fill any gap in a screen where the 200px column box cannot fit with the use of auto-fit. We eliminate gap vertically and horizontally amongst the column of grid of images.

 
#allImages{
 display: grid; /*for grid property to work*/
 grid-gap:0;/*no gap between the thumbnails*/
 grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); /*equal images in every screen resolution*/
}

Current Slide Image

Give current Image bigger width like 80%, and bigger height as well. The slider will not be visible in mobile phones so we use display: none to hide it in small screen using sass mixin to target smaller devices.

#currentSlide{
  height: 300px;   
  width:80%;
  @include mobile{
   display: none;
 }

Animation for image slide

Create a class called fade, which will be using in JavaScript for fade effect on the current grid which is clicked thumbnail. Animation function fadeIn() is used to toggle the fade effect from dull to clear which is opacity 0 to 1 with the help of key frames.

.fade{
 opacity: 0;
 animation: fadeIn 500ms forwards;
}
@keyframes fadeIn{
  to{
   opacity: 1;
  }
}

Vanilla JavaScript

Select Images and Slide

We use querySelector() to select the id of the current slide. We then use querySelectorAll() to select all image thumbnails in the div element.

 const currentSlide = document.querySelector("#currentSlide");//current image, in a slider
 const allImages = document.querySelectorAll("#allImages img");//all images

Listen for click event in thumbnails

The next step is to add event listener for click event to check if a user has click any thumbnail. Let’s use foreach and store each image in nameimg so we can listen to click event on each thumbnail in array of querySelectorAll(). Now the function clickedImage is called when the user click on each thumbnail.

   allImages.forEach( img => img.addEventListener( 'click' , clickedImage ) );                               

Listen for click event in thumbnails

Now a user has clicked on a thumbnail,the function clickedImage(event) . Now the src attribute of the current slide image is changed to that of the clicked image, thus the clicked image will be our new slide. Now let’s animate the project.

function clickedImage(event) {
 //change current slide to src of the clicked img
   currentSlide.src = event.target.src;       
}                                                                   

Opacity on selected thumbnail

Let’s set default to 0.5, we then give some opacity to the first thumbnail in the grid since it is the current slide by default. The first image in the array is allImages[0].

  const opacity = 0.5;
  //set first img opacity on default
  allImages[0].style.opacity = opacity;
  allImages.forEach( img => img.addEventListener( 'click' , clickedImage ) );                                                               
                                
                            

Reset Opacity

Let’s reset fade effect on the thumbnail when it is no longer selected. We do that by changing opacity to 1 on that thumbnail. See allImages.forEach( img => ( img.style.opacity = 1) ); .

 const opacity = 0.5;
 //set first img opacity on default
 allImages[0].style.opacity = opacity;
 allImages.forEach( img => img.addEventListener( 'click' , clickedImage ) );
                                        
 function clickedImage(event) {
 //change current slide to src of the clicked img
 currentSlide.src = event.target.src;    
 //reset opacity
 allImages.forEach( img => ( img.style.opacity = 1) );  
}

Slide Animation using fade class

Remember in CSS we have created a fade class, now we going to add fade class to the current slide image to create fade animation which will change from dull to clear or opacity 0 to 1 for half second.

function clickedImage(event) {
  //add fade class to currect clicked img
  currentSlide.classList.add(".fade");         
}
                                
                            

Add Fade class on Clicked Thumbnail

Now we create a time using setTimeout() function to remove the fade class in the slide image with in half second(500ms),see setTimeout( () => currentSlide.classList.remove(".fade") , 500 );
finally we add opacity on the current clicked thumbnail,see event.target.style.opacity = opacity;

  function clickedImage(event) {
    //add fade class to currect clicked img
    currentSlide.classList.add(".fade"); 
     //remove fade class to currect clicked img after half a sec
    setTimeout( () => currentSlide.classList.remove(".fade") , 500 );
    //change opacity on clicked img
    event.target.style.opacity = opacity;        
}