Simple Image Gallery using Javascript not changing the source of the big image

Question

I am trying to make a simple image gallery test. I want there to be four thumbnail images. When any of them is clicked, it will change the image source of the big image to the correct corresponding image, but I am having problems trying to achieve this.

Here is what i have so far:

HTML

<body>
    <section id="gallery">
        <div id="sidebar">
            <a id="image1" href=""><img src="images/blue_small.jpg"></a>
            <a id="image2" href=""><img src="images/red_small.jpg"></a>
            <a id="image3" href=""><img src="images/green_small.jpg"></a>
            <a id="image4" href=""><img src="images/orange_small.jpg"></a>
        </div>
        <div id="enlarged">
            <img id="bigImage" src="images/blue_large.jpg" >
        </div>
    </section>
    <script src="test.js"></script>
</body>

JavaScript

function imageSelect () {
    var image1 = document.getElementById("image1");
    var image2 = document.getElementById("image2");
    var image3 = document.getElementById("image3");
    var image4 = document.getElementById("image4");
    var bigImage = document.getElementById("bigImage");

    if (image1.clicked == true) {
        bigImage.src = "images/blue_large.jpg";
    } else if (image2.clicked == true) {
        bigImage.src = "images/red_large.jpg";
    } else if (image3.clicked == true) {
        bigImage.src = "images/green_large.jpg";
    } else if (image2.clicked == true) {
        bigImage.src = "images/orange_large.jpg";
    }
};

imageSelect();

Thanks for any help.

there is nothing connecting your script with the click event on the objects.. you should add an event listener on the small images; — L777, Mar 16 '16 at 01:51

score 1 · Accepted Answer · answered Mar 16 '16 at 01:54

Javascript:

function imageSelect(imageSrc) {
var newImage = imageSrc;
document.getElementById("bigImage").src = newImage;
return false;
};

Html:

<section id="gallery">
        <div id="sidebar">
            <a id="image1" href="#" onclick="imageSelect('blue_big.png');"><img src="blue_small.png"></a>
            <a id="image2" href="#" onclick="imageSelect('red_big.png');"><img src="red_small.png"></a>
            <a id="image3" href="#" onclick="imageSelect('green_big.png');"><img src="green_small.png"></a>
            <a id="image4" href="#" onclick="imageSelect('orange_big.png');"><img src="orange_small.png"></a>
        </div>
        <div id="enlarged">
            <img id="bigImage" src="te5.png" >
        </div>
    </section>

Thanks for your help, just had to make sure the image names matched up with mine as you imputed them a tad differently — Kyle Bing, Mar 16 '16 at 02:03
yes, I similitude it pretty quickly on my computer and changed some to make it easier for me to work with. Best to you! — Chattervast, Mar 16 '16 at 02:04

score 0 · Answer 2 · answered Mar 16 '16 at 01:45

0

Everything seems in order. But you do need to listen for onclick event and fire your imageSelect() function then.

answered Mar 16 '16 at 01:45

Hasan Wajahat

1,717
2
16
16

score 0 · Answer 3 · answered Mar 16 '16 at 01:53

What results are you getting? We do not have much to work with. The code looks good except I would add another left brace before the 'if' condition and its closing brace before your final closing brace. This isolates the 'if' function from the image loading. Also, what is driving/calling the 'imageSelect()' function?

I just now noticed that your images are not being called by their implicit name. Add their names to those function calls and it should work.

score 0 · Answer 4 · answered Mar 16 '16 at 03:22

Here is a variation on the theme that adds a bit of complexity if you needed a more robust solution.

<section id="gallery">
  <div id="sidebar">
    <ul>
      <li>
        <img src="http://placehold.it/100x100" class="small" data-key="aaa" />
      </li>
      <li>
        <img src="http://placehold.it/100x100" class="small" data-key="bbb" />
      </li>
      <li>
        <img src="http://placehold.it/100x100" class="small" data-key="ccc" />
      </li>
      <li>
        <img id="four" src="http://placehold.it/100x100" class="small" data-key="ddd"/>
      </li>
    </ul>
  </div>
  <div id="enlarged">
    <img id="big" src="http://lorempixel.com/h/600/410/" >
  </div>
</section>

--

var big = document.getElementById("big");
var imgsrc = {
  'aaa' : 'http://lorempixel.com/d/600/410/',
  'bbb' : 'http://lorempixel.com/e/600/410/',
  'ccc' : 'http://lorempixel.com/f/600/410/',
  'ddd' : 'http://lorempixel.com/g/600/410/'
};

function imageSelect (target) {
  var img = new Image();
  img.src = imgsrc[target.dataset.key];
  img.onload = function(){
    big.src = img.src;
  }
};

document.body.addEventListener("click", function (event) {
  if (event.target.classList.contains("small")) {
    imageSelect(event.target);
  }
});

A couple key points :

use delegated events to minimize handler logic
access stored data from minimal markup attributes
provide for some kind of transition with a load handler

With these very basic features, you could support any number of different requirements (and without jquery).

Fiddle

Simple Image Gallery using Javascript not changing the source of the big image

4 Answers4