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

Yes, just `this`. Please add more details like your markup and code you already tried, then we can give you more specific advice. — bfavaretto, Aug 14 '13 at 14:23
If you don't want to use jQuery, why did you tag your question with it? — j08691, Aug 14 '13 at 14:35

bfavaretto · Accepted Answer · 2013-08-14T17:16:11.013

2

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.

edited Aug 14 '13 at 17:16

answered Aug 14 '13 at 14:41

bfavaretto

71,580
16
111
150

It's worth noting that getElementsByClassName() has compatibility implications [quirksmode.org/dom/w3c_core](http://www.quirksmode.org/dom/w3c_core.html#gettingelements) – Zach dev Aug 14 '13 at 14:45
@Zachdev Yes, if you decide to use no library, you'll have to handle the cross-browser issues yourself. (Did you write that comment before I added the last sentence?). – bfavaretto Aug 14 '13 at 14:47
I've added before the
. The gallery image src says undefined. What's wrong?
– Patrick Aug 14 '13 at 15:08
Thanks it worked, but why didn't the script I used before work? Why did it return undefined? – Patrick Aug 14 '13 at 15:18
2

because apparently `this` in that context is the `li` that you attach your event listener to – j03w Aug 14 '13 at 15:26
@j03w You're right, my mistake. I'll fix the answer later, on mobile right now. – bfavaretto Aug 14 '13 at 15:40
@Patrick Sorry, there were a few mistakes in my code, I just updated it. – bfavaretto Aug 14 '13 at 17:17

score 0 · Answer 2 · answered Aug 14 '13 at 14:40

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
}

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

2 Answers2