Change main photo when you click on links

JavaScript
1

I’m trying to add a very simple gallery where the photo is at the top and thumbnails are underneath. All I want to happen is that the photo changes when you click on one of the thumbnails. I’ve been trying to search for this but the galleries all seem to have stuff I don’t want.

I tried the following and it does change the image but it also opens up the thumbnail.

<img id="im" src="photos/039.jpg">
<a href="photos/t001.jpg" onclick="document.getElementById('im').src='photos/001.jpg'"><img src="photos/t001.jpg"></a>
2

You’ll need a bit more code to prevent the click event, that being to return false from the event.

An easier to manage variation of what you have above, is to move the code to a separate function. I’ve also changed the link to go to the large image, so that people without javascript can see the image, and so that scripting can use that image as well.

Using inline scripting attributes leads to massive amounts of duplication, and ends up making your job a lot harder. I’ve removed them from this sample code, because there is an easier way where we use scripting to attach an onclick event handler on to each of those links.


<div id="gallery">
    <img id="im" src="photos/039.jpg">
    <a href="photos/001.jpg"><img src="photos/t001.jpg"></a>
</div>

The script code you should place in a separate file, and save it as js/script.js - that way you can load it from the end of your body, without it cluttering up the rest of the HTML code for your page.


...
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

Now for the scripting code. We want to loop through each of the links in the gallery, and add an onclick event to each one.

js/script.js


var gallery = document.getElementById('gallery'),
    links = gallery.getElementsByTagName('a'),
    i;
for (i = 0; i < links.length; i += 1) {
    links[i].onclick = showPhoto;
}

That showPhoto function, it will have the link available as the this keyword, so that you can easily retrieve the large image from the href attribute.

We can also now return false from the function, to prevent the default action (that of following the clicked on link) from occuring.


function showPhoto() {
    document.getElementById('im').src = this.href;
    return false;
}
3

You forgot to “return false” at the end of your onclick statement, which cancels out the default action of the href attribute, in other words:
<img id=“im” src=“photos/039.jpg”>
<a href=“photos/t001.jpg” onclick=“document.getElementById(‘im’).src=‘photos/001.jpg’; return false;”><img src=“photos/t001.jpg”></a>

As pmw57 said, your markup could definitely do with some tweaking, but the short answer to your question is “return false”

4

Wow that works great pmw57!

I want to also add a previous/next photo link as an alternative to clicking individual thumbs, is that easy to do?

5

The script would need to search the links for the image currently being shown, and then proceed to the next/prev link from there, and properly handle situations such as being at the start or end of the thumbnails, but it’s possible to achieve.

The prev/next links would want a unique id on each of them, so that you can attach an onclick event on to each of them.

Do you want to make a start on it?

6

Oh it’s okay if it’s not simple to do. One last thing, is it possible to add an anchor link behaviour so that when you click on one of the thumbs it automatically jumps up to the main photo?

7

That would be:


window.location = '#im';
8

Thanks!