Hi everyone,
I'm trying to create a simple thumbnail viewer with jQuery. Here goes the code:
$(function(){
$("ul.thumbnails li").click(function(e){
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image
URL
$("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
});
<div class="image-gallery">
<img class="featured" src="big.jpg">
<ul class="thumbnails">
<li id="thumb01">
<a href="big.jpg"><img src="small.jpg"></a>
</li>
<li id="thumb02">
<a href="big.jpg"><img src="small.jpg"></a>
</li>
<li id="thumb03">
<a href="big.jpg"><img src="small.jpg"></a>
</li>
</ul>
.thumbnails li {
margin: 0;
padding: 5px 5px 0 5px;
list-style: none;
float: left;
overflow: hidden;
}
thumbnails li img {
width: 50px;
height: 50px;
margin: 0;
padding: 0;
float: left;
}
If i click the thumbnail, the browser goes straight to the full image instead of just changing the img src with jQuery. But I if i click somewhere inside the <li> it works.
I know this must be simple, but I don't know where I'm going wrong. I've tried studying other galleries, like http://www.sohtanaka.com/web-design/examples/image-rotator/ , but couldn't find what I'm missing.
I could really use some help from you guys :)
