Hi there,
I am making an image gallery using jQuery. I decided to make it from scratch rather than using a plug-in, but I’m confused about why my code is behaving in an unexpected way.
So I have two sets of thumbnails sitting off screen. The jQuery code selects anchors using the selector (‘.thumbs a’), so every anchor which is the child of an element with the class ‘thumbs’.
As a new thumbnail set is selected, the current set slides of the page, and its class is removed, then the new set slides on and the class ‘thumbs’ is added.
So everthing works with the original set of thumbnails, but once i perform the removeClass/addClass, it seems as though jQuery will not recognise the class change.
Here is the HTML:
<body>
<div id="gallery1">
<div id="main_img"><img /></div>
<div id="com_thumbs">
<ul>
<li><a href="images/comissions/favor_big.jpg"><img src="images/comissions/thumbs/favor.jpg"></a></li>
<li><a href="images/comissions/Glamour.jpg"><img src="images/comissions/thumbs/Glamoura.jpg"></a></li>
<li><a href="images/comissions/zoo1.jpg"><img src="images/comissions/thumbs/zooa.jpg"></a></li>
<li><a href="images/comissions/zoo2.jpg"><img src="images/comissions/thumbs/zoob.jpg"></a></li>
</ul>
</div>
<div id="cos_thumbs">
<ul>
<li><a href="images/costume/Lucia_big.jpg"><img src="images/costume/thumbs/Lucia.jpg"></a></li>
<li><a href="images/costume/mercedes10.jpg"><img src="images/costume/thumbs/mercedes10.jpg"></a></li>
<li><a href="images/costume/mercedes21.jpg"><img src="images/costume/thumbs/mercedes21.jpg"></a></li>
<li><a href="images/costume/mercedes2a.jpg"><img src="images/costume/thumbs/mercedes2a.jpg"></a></li>
</ul>
</div>
</div>
<ul id="navigation">
<li><a href="#" id="commissions">comissions</a></li>
<li><a href="#" id="costume">costume</a></li>
<li><a href="#" id="styling">styling</a></li>
</ul>
</body>
Here’s the css:
body{
text-align:center;
}
ul{
padding:0;
list-style:none;
}
li{
display:inline;
margin:5px;
}
#main_img{
width:400px;
height:500px;
margin:auto;
}
#main_img img{
opacity:0;
filter:alpha(opacity=0);
}
#gallery1{
width:800px;
height:600px;
margin:auto;
overflow:hidden;
position:relative;
}
#cos_thumbs, #com_thumbs{
left:1000px;
position:absolute;
width:800px;
}
And finally the jQuery:
$(function(){
$('#com_thumbs').animate({'left' : '0'}, 2000).addClass('thumbs');
var firstImg = $('.thumbs a:first').attr('href');
$('#main_img img').attr('src', firstImg).animate({'opacity':'1'});
$('#costume').click(function(){
$('.thumbs').animate({'left' : '1000px'}, 2000, function(){
$(this).removeClass('thumbs');
$('#cos_thumbs').animate({'left' : '0'}, 2000).addClass('thumbs');
});
return false;
});
$('.thumbs a').click(function(){
var thisImg = $(this).attr('href');
var currentImg = $('#main_img img').attr('src');
if (thisImg == currentImg){
} else {
$('#main_img').fadeOut(function(){
$('#main_img img').attr('src', thisImg)
$('#main_img').fadeIn();
});
}
return false;
});
});
Any help would be great!
Cheers,
Mike