How to show a picture after clicking the thumbnail using Javascript not jQuery?

Question

I have found the answer on how to do the same thing with jQuery How to show/hide big image by clicking on thumbnails?, but I would like to know how to do the same thing with just Javascript.

In jQuery there you can use $(this) to specify that the image that you clicked on should become the bigger image, but is there an equivalent without jQuery?

HTML

<ol>
    <li class="thumbs">
        <img src="images/thumbnails/t__01.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__02.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__03.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__04.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__05.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__06.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__07.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__08.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__09.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__10.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__11.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__12.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__13.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__14.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__15.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__16.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__17.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__18.jpg" alt="">
    </li>
</ol>
<div id="gallery"><img src="images/thumbnails/t__01.jpg" alt="">
</div>

I was thinking that I could link the li images to a image id using only CSS, but that would mean that if I pressed back, then it would go back to the previous image instead of the previous page.

One way of doing it may be to use on each image. The changeImage() would then change the current larger image to the one clicked. If the thumb clicked in the active image, then nothing happens. Else change the #gallery img src to the clicked thumbs' src.

I don't know how to convert that into code though. Thanks

Answer 1

The vanilla-js version will not be so different from the jQuery version. If you add a click listener with addEventListener, the clicked element will be available as this:

var large = document.getElementById('gallery').firstChild;
// another option:
// var large = document.querySelector('#gallery img');

var thumbs = document.getElementsByClassName('thumbs');
// another option:
// var thumbs = document.querySelectorAll('.thumbs');

for(var i=0; i<thumbs.length; i++) {
    thumbs[i].addEventListener('click', function(e){
        large.src = this.getElementsByTagName('img')[0].src;
    }, false);
}

You can use a single event handler on your <ol>, instead of one per <li>. This example assumes a thumbs-container class on the <ol>:

var container = document.querySelector('.thumbs-container');
container.addEventListener('click', function(e){
    large.src = e.target.src;
}, false);

Be aware that my code examples need a few tweaks to work cross-browser, particularly for IE<=8.

Answer 2

Attach a unique id to each of your li tags.

<li class="thumbs" id="unique1" onclick="function_name(this.id)">
        <img src="images/thumbnails/t__01.jpg" alt="">
    </li>

javascript code here

function function_name(test_id){
    var _img = document.getElementById("test_id");
    //code to show the corresponding image
}