Simple photo gallery with CSS and JavaScript

The files we need

We need three files for our little project.

• We need an index.html file for our html code.
• A JavaScript file, and a CSS file.
• I will not cover the css file, because it is not important for our example, but you can download the source code of the demo with all the files in it.

The HTML code

Let's take a look at the html code.
Bellow we have a container with a class of"gallery" which holds all of our gallery code.

<div class="gallery">
	<div class="large">
		<img src="images/01.jpg">
		<p class="caption">
			<span>Some words for the first image</span>
		</p>
	</div>

	<div class="thumb">
		<img src="images/01.jpg" alt="Some words for the first image">
		<img src="images/02.jpg" alt="Some words for the second image">
		<img src="images/03.jpg" alt="Some words for the third image">
		<img src="images/04.jpg" alt="Some words for the fourth image">
		<img src="images/05.jpg" alt="Some words for image number six">
	</div>
</div>

HTML Code breakdown

• The gallery container is divided in two sections. In the first section we have a container with a class of "large". Inside that container we have an image tag in which we display the large image of the first thumbnail (line 10), and a p tag where we display the caption.
• In line 9 we have the second section which has a class of "thumb", and inside we have img tags to display the thumbnails. The img tags also have alt attributes describing the image.

The logic

If you saw the demo, you saw that when we click on a thumbnail, that thumbnail is displayed as a large image in the "large" container.
How this is done ?
When we click on the thumbnail we grab the thumbnail's img src value, and alt value.
Then we replace the current src value in the img tag in line 3 with the src value of the thumbnail we clicked on.
Also we replace the caption in line 5 with the acquired alt value.
And that's it.

The JavaScript code

Let's see what we have in the javascript file.

let thumbs = document.querySelectorAll(".thumb img");
let large = document.querySelector(".large img");
let largeCaption = document.querySelector(".caption span");

for(let thumb of thumbs){
	thumb.onclick = function(){
		large.src = this.src;
		largeCaption.innerHTML = this.alt;

		for(item of thumbs){
			item.classList.remove("selected");
		}

		this.classList.add("selected");
	}
}

Javascript code breakdown

• In line 1 we grab all the img tags inside the "thumb" container and we store them in the thumbs variable which is now an array. In fact it's an html collection but acts as an array.
• In line 2 we target the img tag inside the "large" container.
• And in line 3 we are targeting the images caption.
• In line 5 we loop through the thumbs array and in line 6 we assigning an onclick event-listener on each thumbnail. Now when we click on a thumbnail we have access to its src and alt attributes.
• In line 7 we replace the large image source value, with the thumbnails we clicked on source value. And in line 8 we take the text from the alt attribute and we displaying it as caption.
• In the stylesheet there is a .selected class, which adds a border to the selected thumbnail.

  .gallery .thumb img.selected{
  	border:  2px solid #57f38e;
  }
  		

• In line 10 in our javascript file we loop once again through the thumbnails, and we removing any assigned .active class, so none of the thumbnails has that selected border style.
• And then in line 14 we assign the .selected class to the clicked thumbnail.

Summary

We saw how to create a simple gallery using Javascript, html, and css.

Source code

You can download the source code and use it in any way you like.

Times downloaded: 122

Buy me a coffee