Slideshow - Buscar dados no banco

Na verdade nao sei se estou postando no lugar certo.

Mas enfim vamos lah.

Baixei um script da net para apresentação de um slide de noticias, mas estou adaptando para que ele busque os dados no banco de dados

Ele esta funcionando mas existe um pequeno problema na apresentação.

Quando acesso a pagina pela primeira vez ou atualizo a pagina a primeira imagem da primeira noticia aparece rapidamente e já vai para a segunda imagem da segunda noticia em uma fração menor que um segundo, porem porem se eu clicar na imagem que aparece ele leva para a noticia da primeira imagem que no caso ja nao esta mais aparecendo.

Lembrando que a legenda tambem muda rapidamente mas persiste o mesmo link.

Segue o codigo abaixo ja adaptado.

Somente depois de alguns segundo é que os links começam a funcionar corretamente.

<script type="text/javascript" src="estrutura/slideshow/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Execute the slideShow
	slideShow();

});

function slideShow() {

	//Set the opacity of all images to 0
	$('#gallery a').css({opacity: 0.0});

	//Get the first image and display it (set it to full opacity)
	$('#gallery a:first').css({opacity: 1.0});

	//Set the caption background to semi-transparent
	$('#gallery .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});

	//Get the caption of the first image from REL attribute and display it
	$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 400);

	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',8000);

}

function gallery() {

	//if no IMGs have the show class, grab the first image
	var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

	//Get next image caption
	var caption = next.find('img').attr('rel');

	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');

	//Set the opacity to 0 and height to 1px
	$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:800 });

	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '60px'},500 );

	//Display the content
	$('#gallery .content').html(caption);

}

</script>
<style type="text/css">

body{ font-family:arial }

.clear {
	clear:both
}

#gallery {
	position:relative;
	height:311px
}
	#gallery a {
 float:left;
 position:absolute;
	}

	#gallery a img {
 border:none;
	}

	#gallery a.show {
 z-index:500
	}

	#gallery .caption {
 z-index:500;
 background-color:#000;
 color:#BBD2FF;
 font-size:16px;
 font-family:Arial;
 font-weight:bold;
 height:60px;
 width:100%;
 position:absolute;
 bottom:5;
	}

	#gallery .caption .content {
 margin:8px
	}

	#gallery .caption .content h3 {
 margin:0;
 padding:0;
 color:#1DCCEF;
	}

</style>

<div id="gallery">
<div class="" align="right" style="font-family:Arial; font-size:18px; font-weight:bold; color:#00C; padding:5px; border-right: 12px solid #FFFFFF; border-bottom:1px solid #00C">Destaques</div>
<div style="height:4px;"></div>
 <?php
$sql = mysql_query("SELECT * FROM destaque WHERE categoria='fotodia' order by rand() LIMIT 4");

while($mostrar = mysql_fetch_assoc($sql)) {

echo "<a href='?pg=noticia&id=$mostrar[id_galeria]'>
<img src='images/destaques/$mostrar[foto]' width='500' height='275' rel='$mostrar[texto]'></a>" ;?>
<?php } ;?>

	<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>
<div align="center" style="height:5px; border-bottom:1px solid #00C"></div>

Aguardo uma resposta se alguem conseguir detectar o erro.