CODEWITHSUNDEEP
javascripthtmlimageaddeventlistenerimage-gallery
SneakyShrike
SneakyShrike

Reputation: 823

JavaScript - Changing preview image by clicking a thumbnail image with addEventListener only

I'm trying to create a very simple, pure JavaScript image gallery where upon clicking on a smaller image thumbnail, it changes the larger preview image to the thumbnail you just clicked.

I'm new to JavaScript and i've been experimenting with it a bit. I'm also trying to avoid using onClick within the HTML as I've been told that's bad practice. So I've found that using the addEventListener seems to be another approach.

The only problem is, that i'm not sure what to do with it. Most of the other tutorials use the onClick function which isn't ideal.

I was wondering if anyone could help or even provide some other sources to give me a start.

Here is the HTML and my start at the JavaScript:

HTML

<section class="image-gallery">
        <h4>IMAGE GALLERY</h4>

        <section id="gallery-preview">
          <img src="images/gallery1.png" alt="image-gallery-1">
        </section>

        <section id="gallery-thumbnails">
          <img src="images/gallery1.png" alt="image-gallery-1">     
          <img src="images/gallery2.png" alt="image-gallery-2">
          <img src="images/gallery3.png" alt="image-gallery-3">
          <img src="images/gallery4.png" alt="image-gallery-4">
          <img src="images/gallery5.png" alt="image-gallery-5">
        </section> 

      </section>

JavaScript

(function(){

  let image-preview = document.getElementById("gallery-preview");
  let image-thumbnail = document.getElementById("gallery-thumbnails");

  image-thumbnail.addEventListener("click", imageChanger);

  function imageChanger()
  {
    //something here
  }

})();

Upvotes: 0

Views: 2340

Answers (2)

Jeff Matthews
Jeff Matthews

Reputation: 592

Don't use hyphens in your JavaScript variable names. The dash is for subtraction. You can use dashes in class names and element id's, but not as JavaScript variable names.

Your html needs a class for all your images. 

<section id="gallery-thumbnails">
   <img class="my-images" src="images/gallery1.png" alt="image-gallery-1">     
   <img class="my-images" src="images/gallery2.png" alt="image-gallery-2">
   <img class="my-images" src="images/gallery3.png" alt="image-gallery-3">
   <img class="my-images" src="images/gallery4.png" alt="image-gallery-4">
   <img class="my-images" src="images/gallery5.png" alt="image-gallery-5">
</section>

Next, your JavaScript runs asynchronously. You need to understand that. It means that you should not attempt to run your "imageChanger()" function until all the html is loaded. If the html is still loading, some of it might not be present when your function tries to attach the eventListener to it.

By asynchronous, it means JavaScript runs and doesn't wait around for long processes to finish before executing the next line of code. You can do quick things, like add a couple of numbers, but when you are grabbing data from a server and presenting it in html pages, these things take time. You need to be sure you work on them only after they are ready.

To ensure the html is loaded, look into jquery's $(document).ready() {}. You will need to include Jquery with a <script> tag to use it.

$(document).ready() {

   let myImages = document.getElementsByClassName("my-image");

   //  You have more than one image in myImages.
   for (i = 0; i < myImages.length; i++) {
      myImages.addEventListener("click", imageChanger);
   }
}

// Notice this function is **outside** of document.ready.  
// You need the function immediately available.

function imageChanger()
  {
     // "this" is the element you clicked.
     this.style.height = 100px;
     this.style.width = 100px; 
  }

Upvotes: 2

Gwen
Gwen

Reputation: 474

(function(){

  let imagePreview = document.querySelector("#gallery-preview img");
  let imageThumbnail = document.getElementById("gallery-thumbnails");

  imageThumbnail.addEventListener("click", imageChanger);

  function imageChanger(e) {
    imagePreview.src = e.target.src;
  }
})();

Upvotes: 1

Related Questions