HTML Academy
Click ’em all!
Getting to know events14/25
Back to the list of tasks
  • 1. Introduction to events
  • 2. How to add a handler
  • 3. How events are arranged
  • 4. Default actions
  • 5. Please pass the function
  • 6. Hiding the popup
  • 7. Pressing a key
  • 8. Choosing a key
  • 9. With one click
  • 10. Summary of “Events in JavaScript”, part 1
  • 11. First program: “Don’t be shy”
  • 12. Welcome to our photo gallery
  • 13. Click ’em all!
  • 14. Adding an image
  • 15. A bug has crept into the system
  • 16. Scope
  • 17. Global scope
  • 18. Inside out variables
  • 19. Becoming Independent
  • 20. Closures
  • 21. Let’s prepare for school
  • 22. Fixing the gallery
  • 23. Getting to the heart of the matter
  • 24. Summary of “Events in JavaScript”, part 2
  • 25. The Second Program: “Señor Tomato”
A bug has crept into the system
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Adding an image

We have now added the click handlers, and we have verified that everything works. How can we make the large image change when the user clicks?

Images have a src attribute, which can be controlled from JavaScript. We already discussed how you can do this in the past.

In order for the image for the element with the full-photo class (fullPhoto variable) to change, the src value of this element must change.

We have an array with photos data. When Muffin gave us the assignment, he noted that “the order of elements in this array is the same as the order of the thumbnails in the markup.” All of the previews are located in the thumbnails collection. It turns out that the elements in the photos array are suitable for elements from the thumbnails collection with the same index.

For example, a user clicked on the very first thumbnail in the markup. It is the thumbnails[0] in the collection. In that case an image with the photos[0] address should appear in the large image. The following code is the result:

thumbnails[0].addEventListener('click', function () {
  fullPhoto.src = photos[0];
});

Add code inside the handler. We will substitute the value of the element from the photos array in the src attribute. The indexes of the thumbnail and element with the image address will match.

Comments

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Muffin Gallery</title> <link href="gallery/setting.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="pattern"> <section class="gallery"> <h1>Muffin Gallery</h1> <p class="gallery__photo-full"> <img class="full-photo" src="gallery/laptop-large.jpg" width="550" height="367" alt="Large photo"> </p> <p class="gallery__photo-previews"> <button class="gallery__photo-preview" type="button"> <img src="gallery/laptop.jpg" alt="Preview with laptop"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/microphone.jpg" alt="Preview with microphone"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/keyboard.jpg" alt="Preview with keyboard"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/signboard.jpg" alt="Preview with tablet"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/tree.jpg" alt="Preview with tree"> </button> </p> </section> <script src="script.js"></script> </body> </html>
CSS
.gallery { display: flex; flex-direction: column; align-items: center; } .gallery__photo-full { margin-bottom: 12px; } .gallery__photo-full img { display: block; } .gallery__photo-previews { display: flex; list-style-type: none; margin: 0; width: 550px; padding: 0; justify-content: space-between; } .gallery__photo-preview { padding: 0; border: 0; border-radius: 0; background: none; } .gallery__photo-preview:hover, .gallery__photo-preview:focus { opacity: 0.7; } .gallery__photo-preview img { display: block; object-fit: cover; width: 100px; height: 100px; } .gallery__photo-preview--active img { outline: 5px solid red; outline-offset: -5px; } .pattern { background: url("gallery/leaves-pattern.png") 0 0 repeat; }
JavaScript
var photos = [ 'gallery/laptop-large.jpg', 'gallery/microphone-large.jpg', 'gallery/keyboard-large.jpg', 'gallery/signboard-large.jpg', 'gallery/tree-large.jpg' ]; var thumbnails = document.querySelectorAll('.gallery__photo-preview'); var fullPhoto = document.querySelector('.full-photo'); for (var i = 0; i < thumbnails.length; i++) { thumbnails[i].addEventListener('click', function () { console.log('Click on the image'); }); }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Click inside the mini browser to put the focus in this window.

100%
Console
Goalscompleted
0
    1. In the handler replace the string that is output to the console with the image path code in the src attribute: fullPhoto.src = photos[i].
    2. Click on any thumbnail in the gallery.

    Please note how there is an error when the program is executed. Later we will find out why this happened.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.