Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nancy Melucci
Courses Plus Student 36,659 PointsAdding a jQuery handler to switch pictures via URL.
I feel defeated because I thought I understood JQuery handlers. I can't figure this out. I have a model that swaps pictures and their captions via click on a thumbnail. I can read and follow that. But I am tasked to create an alternative model that switches out the pictures and their captions by clicking on the LINK instead. No thumbnails in the new version. I can't make the correct alterations to make it work. A hint would be deeply appreciated.
Code follows. I've already worked on the base code, and I've probably screwed it up. Someday I hope to be good enough to sometimes give the kind of wonderful help I get from the treehouse community. NJM
<!DOCTYPE html>
<!--index.html-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<main>
<h1>Image Gallery</h1>
<ul id="image_list">
<li><a href="images/casting1.jpg" title="Casting on the Upper Kings" class="swapimage">Upper Kings</a>
<li><a href="images/casting2.jpg" title="Casting on the Lower Kings" class="swapimage">Lower Kings</a></li>
<li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn" class="swapimage">Big Horn</a></li>
<li><a href="images/fish.jpg" title="Catching on the South Fork" class="swapimage">South Fork</a></li>
<li><a href="images/lures.jpg" title="The Lures for Catching" class="swapimage">Lures</a></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p id="gallery">
<img src="images/casting1.jpg" alt="Image Gallery area" id="image">
</p>
</main>
<script src="image_gallery.js"></script>
</body>
</html>
//image_gallery.js
$(document).ready(function() {
//preload images
$("#image_list a").each(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
//event handlers for links
$("#image_link a").click(function(event){
evt.preventDefault();
var newsrc = $(this).attr("href");
$("img").attr("src", newsrc);
});
var caption = $(this).attr("title");
$("#caption").this(caption);
//cancel default action of link
//move focus
$("li:first-child a").focus();
});//end ready
/*main.css*/
body {
font-family: Arial, Helvetica, sans-serif;
width: 420px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1, h2, ul, p {
margin: 0;
padding: 0;
}
h1 {
padding-bottom: .25em;
color: blue;
}
h2 {
font-size: 120%;
padding: .5em 0;
}
li {
padding: 0 0.25em;
display: inline;
}
#caption, #gallery {
text-align: center;
}
2 Answers
Steven Parker
243,656 PointsIt all looks good, except that you need a different selector.
When you establish your handlers, you do this:
$("#image_link a").click(function(event){
But I don't see an ID of image_link on the page. Perhaps you meant to write image_list instead. Or even better would be to select using the class:
$(".swapimage").click(function(event) {
After fixing that it should work, but to avoid possible issues if any other images are ever added to the page, I would also suggest replacing this line:
$("img").attr("src", newsrc);
And instead use the ID as the selector:
$("#image").attr("src", newsrc);
Nancy Melucci
Courses Plus Student 36,659 PointsThank. You. So. Much.