Change image on click of link without hardcoding?
What I am trying to do is let the visitor change the image by clicking on the thumbnail set. However, the problem I'm running into is that I really want to get away from hardcoding the location of the images in the script. I want the script to be portable enough to work on any old page and multiple images as long as the IDs match. Is there a way to change the following to replace X src for A, B, or C 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>
I would load the elements into an array, add an event to each one outside of the inlin html, blah blah blah ... but here you go:
Add "this" to your onclick event that passes the tag to the clickSwitch. From there, you can get what you need for the big screen.
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);
}
source to share
For a cleverly derogatory solution, I would suggest putting the image source for the large image as a hyperlink anchor link, so if the javascript is missing, the user will be redirected to the corresponding 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;
}
});
The advantages of this approach:
- Flicking your fingers will do something useful in any browser as long as they are still somewhere.
- JavaScript code is completely decoupled from markup.
source to share
Give the thumbnails an id and send it in a function parameter ...
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>
source to share