[Resolvido] Carregar imagens sem atualizar página. Como?

[Fábio Penna 1]

Olá pessoal, bom dia!

 

Estou com um problema, tenho o site www.fabiopennafotografo.com.br onde ele carregar todo o site antes de mostrar, mas o que acontece que ele também carrega o portfólio com as imagens diretamente de uma pasta.

Gostaria de saber como fazer para carregar a página do portfólio somente quando clicar em 1 link, mas não posso usar iframe pois existe uma função para ampliar as fotos, e já utilizo jQuery no site, mas quando tento usar para carregar página, ele bloqueia o funcionamento das outras funções já existentes na página.

 

Alguém pode me ajudar? simplesmente quero que quando clicar em 1 link ele carregar página "port.php" no portfolio sem ter que atualizar o site.

 

Segue abaixo meus códigos:

 

Parte onde mostra o portfólio no index.php:

		<script type="text/javascript" src="js/jquery-1.6.js" ></script>
	<script type="text/javascript" src="js/cufon-yui.js"></script>
	<script type="text/javascript" src="js/cufon-replace.js"></script>
 		<script type="text/javascript" src="js/Ubuntu_400.font.js"></script>
 		<script type="text/javascript" src="js/Ubuntu_700.font.js"></script>
	<script type="text/javascript" src="js/bgSlider.js" ></script>
	<script type="text/javascript" src="js/script.js" ></script>
	<script type="text/javascript" src="js/pages.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/bg.js" ></script>
	<script type="text/javascript" src="js/tabs.js"></script>
	<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>

<div class="tab-content" id="Mulheres" style="height:800px; overflow:auto; scrollbar-face-color:#666; scrollbar-shadow-color:#333; scrollbar-highlight-color:#333; scrollbar-3dlight-color:#333; scrollbar-darkshadow-color:#333; scrollbar-track-color:#333; scrollbar-arrow-color:#333;"><? $p = 'mulheres'; include('port.php');?></div>

 

Portfólio (port.php):

 

<?php

//URL onde o arquivo PHP vai ficar
$p = $_GET["p"];
$pasta_fotos = "images/".$p."";

//Início da função

	$fotos = array();


//Loop que percorre a pasta das imagens e armazena o nome de todos os arquivos
foreach(glob($pasta_fotos . '/{*.jpg,*.gif}', GLOB_BRACE) as $image) {	


		$fotos[] = $image;

}
rsort($fotos);
//Verifica se deve exibir a lista ou uma foto
if ($_GET["image"] == "") {

	//Faz o loop pelo folder de imagens
	for($i=0; $i < count($fotos); $i++) {		

		//Cria cada uma das thumbs dentro de uma <div> com link para a imagem grande
		echo "<div class='thumbg'>";
		echo "<div class='thumb' style='background-color:#FFF'>";
		echo "<a href='" . $fotos[$i] . "' data-type='prettyPhoto[group2]'>";
		echo "<img src='thumb.php?imagem=" . $fotos[$i] . "'>";
		echo "</a>";
		echo "</div>";
		echo "</div>";
	}


}

?>

[Fábio Penna 1]

Resolvido com:

 

<script type="text/javascript" >
$(document).ready(function(){

$("#port_mulheres").click(function(){

$.ajax({
	url:"port_mulheres.php",
	success:function(html){
		$("#Mulheres").html(html).show("slow")
	}

})//fecha ajax
return false

})//fecha click
});//fecka jquery
</script>