I'm trying to create a functionality where clicking on a thumbnail image in a div will display the full-size version of that image in another div. I want to implement this using the jQuery fadeIn function, but my code isn't working and I am not very familiar with jQuery.
Can someone help me figure out what's wrong with this code?
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.imgdiv {
/* initially overlay is hidden */
display:none;
</style>
</head>
<body>
<div id="book">
<img src="thumbnails/book1.png" width="100" height="123" rel="photo1"/>
<img src="thumbnails/book2.png" width="100" height="123" rel="photo2"/>
</div>
<div class="imgdiv" id="photo1">
<img src="thumbnails/booklarge1.png" />
</div>
<div class="imgdiv" id="photo2">
<img src="thumbnails/booklarge2.png" />
</div>
<script>
$('#book img').click(function() {
$('#book img[rel]').fadeIn('slow');
});
</script>
</body>
</html>