Image change on link click without hardcoding locations?

Question

What I'm trying to do is let a visitor change an image by clicking through a set of thumbnails. However, the problem I'm running into is that I really want to get away from hardcoding the image locations into the script. I want the script to be portable enough to run on any old page and set of images as long as the IDs used match. Is there a way I can change the following to do substitute X's src for A, B or C's src?

JS

function clickSwitch() { var element = document.getElementById("bigscreen"); element.setAttribute("src", "/img/projects/jamison/j2.jpg"); }

HTML

<img class="project-img" src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" id="bigscreen" />

<ul class="project-thumbnails">
<li><a href="#n" onclick="clickSwitch();"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" /></a></li>
<li><a href="#n" onclick="clickSwitch();"><img src="/img/projects/jamison/j2.jpg" alt="Jamison: View Two" /></a></li>
</ul>

Answer 1

I would load the elements into an array, add an event to each of them outside of the inlin html, blah blah blah ... but here you go:

Add "this" to your onclick event, that passes the tag into clickSwitch. From there you can get what you need for bigscreen.

html

<a href="#n" onclick="clickSwitch(this);"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" /></a>

javascript

function clickSwitch(el){
    var src = el.firstChild.getAttribute('src');
    var bigscreen = document.getElementById("bigscreen"); 
    bigscreen.setAttribute("src", src);
}

Answer 2

Give the thumbnails an ID and send it in the function paramater...

function clickSwitch(thumbClicked) {

var imgSrc = document.getElementById(thumbClicked).src;
var element = document.getElementById("bigscreen");
element.setAttribute("src", imgSrc);
}

HTML:

<img class="project-img" src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" id="bigscreen" />
    <ul class="project-thumbnails">
    <li><a href="#n" onclick="clickSwitch(thumb1);"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" id = "thumb1" /></a></li>
    <li><a href="#n" onclick="clickSwitch(thumb2);"><img src="/img/projects/jamison/j2.jpg" alt="Jamison: View Two"  id = "thumb2"/></a></li>
</ul>

Answer 3

For a gracefully degrading solution, I would suggest putting the very image source for the large image as the anchor's hyper reference, so if javascript is not present, the user will be redirected to the appropriate full-size image (example with jQuery):

<a class="thumbLinks" href="/img/projects/jamison/j1-BIG.jpg"><img src="/img/projects/jamison/j1-SMALL.jpg" alt="Jamison: View One" /></a>

$(document).ready(function() {
    $('a.thumbLinks').click(function() {
        //set the source of the big screen to the href of the clicked anchor
        //throw in some animation too
        $('#bigscreen').fadeOut("fast").
                       .attr('src', $(this).attr('href'))
                       .fadeIn();

        //prevent link from being followed if Javascript is present
        return false; 
    }
});

Advantages to this approach:

• Clicking the thumbs will do something useful on any browser as they're still going somewhere.
• Javascript code is completely separated from the markup.