Jquery CarouFredSel not working when using links

Jquery CarouFredSel not working when using links

I am using this carousel.
The html code I am using is this :
<div id="wrapper">
<div id="carousel">
<a href="fichefilm.aspx?numfilm=20772">
<img src="img/e1.jpg" alt="e1" width="700" height="350" border="0" />
</a>
<img src="img/e2.jpg" alt="e2" width="700" height="350" border="0" />
<img src="img/e3.jpg" alt="e3" width="700" height="350" border="0" />
<img src="img/e4.jpg" alt="e4" width="700" height="350" border="0" />
</div>
<div id="thumbs">
<div id="thumbscarousel">
<img src="img/small/e1.jpg" alt="e1" width="150" height="75" border="0" />
<img src="img/small/e2.jpg" alt="e2" width="150" height="75" border="0" />
<img src="img/small/e3.jpg" alt="e3" width="150" height="75" border="0" />
<img src="img/small/e4.jpg" alt="e4" width="150" height="75" border="0" />
</div>
</div>
<div id="pager"></div>
</div>
The javascript :
$(function() {
var thumbs = $('#thumbscarousel');
$('#carousel').carouFredSel({
items: 1,
scroll: {
fx: 'crossfade'
},
auto: {
timeoutDuration: 5000,
duration: 2000
},
pagination: {
container: '#pager',
duration: 300
}
});
thumbs.carouFredSel({
circular: false,
auto: false,
width: 150,
height: 75,
scroll: {
duration: 200
},
items: {
visible: 1,
width: 150,
height: 75
}
});
$('#pager').hover(function() {
var current = $('#carousel').triggerHandler(
'currentPosition' );
thumbs.trigger( 'slideTo', [ current, 0, true, { fx:
'none' } ] );
$('#thumbs').stop().fadeTo(300, 1);
}, function() {
$('#thumbs').stop().fadeTo(300, 0);
});
$('#pager a').mouseenter(function() {
var index = $('#pager a').index( $(this) );
// clear the queue
thumbs.trigger( 'queue', [[]] );
// scroll
thumbs.trigger( 'slideTo', [index, { queue: true }] );
});
});
and CSS :
#wrapper {
width: 700px;
height: 350px;
margin: -200px 0 0 -350px;
position: absolute;
left: 50%;
top: 50%;
box-shadow: 0 5px 15px #013;
}
#carousel {
width: 700px;
height: 350px;
overflow: hidden;
}
#carousel img {
display: block;
float: left;
}
#pager {
text-align: right;
padding: 20px 45px 0 0;
}
#pager a {
background-color: #356;
display: inline-block;
width: 15px;
height: 15px;
margin-right: 6px;
border-radius: 10px;
box-shadow: 0 1px 1px #cef;
}
#pager a.selected {
background-color: #134;
}
#pager a span {
display: none;
}
#thumbs {
display: none;
border: 1px solid rgba(0, 0, 0, 0.8);
background-color: rgba(0, 0, 0, 0.5);
width: 150px;
height: 75px;
padding: 10px;
position: absolute;
top: 240px;
right: 10px;
z-index: 10;
}
#thumbs img {
display: block;
float: left;
}
But for some reason the first image won't show up ( the others do show
up), when I remove the <a> </a> balises it will work fine though.
I added this code in the css:
#carousel a img {
display: block;
float: left;
}
But it does not change much. Is there a way to solve this please ?