Building a JavaScript Photo Gallery

💡 The Concept

A photo gallery brings HTML, CSS, and JavaScript together in a single project with an immediate, visible result. You do not need to understand JavaScript to build this one. The JavaScript is a single statement repeated once per thumbnail, and the only editing it requires is swapping out image file names. The concept section explains exactly what each part does so you can make those edits with confidence.

Here is what the gallery looks like:

You can try the finished gallery in JSFiddle before reading the code: https://jsfiddle.net/smetoxen/9d4jrr3n

How It Works

The gallery has two parts:

1. A large preview image at the top that displays the selected photo.
2. A row of small thumbnail images below it. Each thumbnail has an onclick attribute. When a visitor clicks a thumbnail, one line of JavaScript swaps the preview image’s src to match the thumbnail that was clicked.

Exercise: Try It Yourself

Step 1. Open the page where you want to add the gallery. If you do not have a page yet, copy your website template and rename the copy baby-animals.html. You will be adding the gallery code inside the <main> section of that page.

Step 2. Copy this HTML into your page. The images point to a live URL so the gallery works immediately when you open it in the browser:

<div class="gallery">

  <!-- Main preview image -->
  <div class="preview">
    <img id="preview" src="http://whitebuffalosolutions.com/WB-Template/images/photo1.jpg"
         alt="Gallery preview" height="600" width="800" />
  </div>

  <!-- Thumbnail row -->
  <div class="gallery-thumbnails">
    <img onclick="document.getElementById('preview').src = document.getElementById('img1').src;" id="img1" src="http://whitebuffalosolutions.com/WB-Template/images/photo1.jpg" alt="Photo 1" />
    <img onclick="document.getElementById('preview').src = document.getElementById('img2').src;" id="img2" src="http://whitebuffalosolutions.com/WB-Template/images/photo2.jpg" alt="Photo 2" />
    <img onclick="document.getElementById('preview').src = document.getElementById('img3').src;" id="img3" src="http://whitebuffalosolutions.com/WB-Template/images/photo3.jpg" alt="Photo 3" />
    <img onclick="document.getElementById('preview').src = document.getElementById('img4').src;" id="img4" src="http://whitebuffalosolutions.com/WB-Template/images/photo4.jpg" alt="Photo 4" />
    <img onclick="document.getElementById('preview').src = document.getElementById('img5').src;" id="img5" src="http://whitebuffalosolutions.com/WB-Template/images/photo5.jpg" alt="Photo 5" />
    <img onclick="document.getElementById('preview').src = document.getElementById('img6').src;" id="img6" src="http://whitebuffalosolutions.com/WB-Template/images/photo7.jpg" alt="Photo 6" />
  </div>

</div>

Two things to notice:

• The main preview image has id="preview". This is how JavaScript finds it.
• Each thumbnail has a unique id (img1, img2, etc.) and an onclick attribute containing JavaScript.

Step 3. Copy this CSS into your stylesheet:

.gallery .preview {
  width: 100%;
  height: auto;
}

.gallery .gallery-thumbnails {
  margin: 0 auto;
  text-align: center;
}

.gallery .gallery-thumbnails img {
  width: 100px;
  height: 75px;
  margin: 3px 10px 10px 0;
}

.gallery .gallery-thumbnails img:hover {
  opacity: .8;
  cursor: pointer;
}

.gallery .preview img#preview {
  padding: 1px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

Step 4. Save and open the page in your browser. Click each thumbnail — the gallery should work right away.

Assignment: Switch to the Baby Animal Gallery

Now replace the URL images with the baby animal photos. The zip below contains six photos already cropped, resized, and optimized at 800 × 600 px using the Images 1-2-3 steps.

Download: baby-animals.zip

Step 5. Add the downloaded image files to your images folder.

Step 6. In each <img> tag in the HTML, find the src= attribute — that is the part that tells the browser where to find the image. Replace the long URL with a local path pointing to your downloaded file. For example, the first thumbnail currently reads:

src="http://whitebuffalosolutions.com/WB-Template/images/photo1.jpg"

Change it to:

src="images/elephant.jpg"

Do this for the preview image and all six thumbnails, using this list:

• Preview image and img1: images/elephant.jpg
• img2: images/macsque.jpg
• img3: images/monkey.jpg
• img4: images/penguin.jpg
• img5: images/swan.jpg
• img6: images/turtle.jpg

Step 7. Update the alt text on each image to describe the animal.

Step 8. Save and test. The gallery should now show your baby animal photos.

Using Your Own Images

When you are ready to use your own photos in a gallery, run each image through the Images 1-2-3 process before adding it:

• Crop each photo to a 4:3 ratio so all your gallery images are the same shape.
• Resize to 800 × 600 px to match the dimensions set in the HTML.
• Optimize with TinyPNG to keep file sizes small and the page fast.

Then update the src path and alt text for each <img> tag. Make sure the preview src and the first thumbnail src point to the same photo so the gallery looks correct when the page loads.

❓ Frequently Asked Questions

★ Key Takeaways

A photo gallery is a great way to see JavaScript in action. This lesson walked you through building a simple gallery where clicking a thumbnail updates the main image on the page. Next, you will learn how to design a simple logo using HTML and CSS. A clean logo makes a site look polished and professional right away.

← Back to Web Images Lessons

← Back to All Lessons