CCode for Artists - Miles DeCoster

Click thumbs to change the large image.


This example uses jQuery to hijack the href links on the thumbs. The page looks and acts the same as the previous example but the technique is different. The thumbnail images link to the larger pictures, but we take the info from the href attribute and use it to change the large picture source rather than actually jumping to the link. An advantage to this technique is that the page still functions without JavaScript though the larger pictures will just open up in the browser window.

A click function on the anchor tags on the thumbs checks to see which thumb is clicked on and reads the href attribute via whichPic = $(this).attr('href'); (the keyword "this" refers to the specific thumb clicked on). The image source in the #bigBox img element is changed to match the href of the thumb link: $('#bigBox img').attr('src', whichPic). The return false; prevents the link from functioning normally.

Hijacking links is a very common thing in JavaScript and jQuery code, so you will see it in many examples. The main reason for this is that it allows for a fallback behavior if JavaScript is not implemented by the viewing device or is turned off by the user.

<script type="text/javascript">
$(document).ready(function() {

	var whichPic = "";
	$('.thumb a').click(function() {
		whichPic = $(this).attr('href');
		$( '#bigBox img' ).attr('src', whichPic);
		return false;
	});
	
});
</script>

© 2013 Miles DeCoster