Estou desenvolvendo um site que tem uma `div` onde eu tenho um script que lista resultados de uma consulta SQL. São imagens, no caso. O site foi desenvolvido em apenas uma página, então ao clicar em portfólio, ele apenas me leva até á `div #portifolio`. O problema é que eu gostaria de ao trocar de categoria no `portfolio` que ele não desse *refresh* na página, apenas recarrega-se a `div`.

Já procurei bastante na net, até encontrei um script que era bem similar ao que eu queria, mas dava bug na janela modal e no efeito *grayscale* também.

O código é este:

    <div id="portifolio" class="grid_24">
	 <nav id="menu-portifolio" class="grid_24">	
		 <ul id='nav'>
								<li><a href='#'>SERVIÇOS<img class='icon-menu' src='images/icon-menu.png' alt='Icone do menu'/></a>
									<ul>
										<?php
											// Includa a conexão com o banco de dados sql
											include "conn.php";
											
										// Conecta a tabela categorias
											$result = mysql_query('SELECT * FROM categorias')or die(mysql_error());
											
											echo "<li><a href='?id_todos=todos#bloco03'> &nbsp Todos </a></li>";
											
											// Exibe o resultado da consulta
											while ($row = mysql_fetch_object($result)) {
												echo "<li>		
														<a href='?id=$row->id#bloco03'> &nbsp $row->nome </a>
													  </li>
												   ";
											}							
										?> 
								  </ul>
								</li>								 
							 </ul>
						</nav>	
							     
					</nav>
					
					<!--  Primeira pagina portifólio -->
					<div id="modal" class="conteudo-portifolio grid_24">					 
							<?php 
		
							// Conecta a tabela portifolio							
							if (isset($_GET['id']) && is_numeric($_GET['id'])) {  
								$id_categoria = $_GET['id']; 
								$resultado = mysql_query("SELECT * FROM portifolio WHERE id_categoria = '$id_categoria' LIMIT 12"); 
								
								// Exibe o resultado da consulta
								$myModal = 1;
								while ($row = mysql_fetch_object($resultado)){
										echo "
											<figure class='img-portifolio'> 
												<a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
											</figure>
 
											<div class='window' id='janela1".$myModal."'>
												<img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
											</div>							 
											 
											<!-- mascara para cobrir o site -->  
											<div id='mascara'></div>										

											 ";
									$myModal++;
									}								
								} else {
									$resultado_todos = mysql_query("SELECT * FROM portifolio LIMIT 12");
									// Exibe o resultado da consulta
									$myModal = 1;
									while ($row = mysql_fetch_object($resultado_todos)){
										echo "
											<figure class='img-portifolio'> 
												<a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
											</figure>
 
											<div class='window' id='janela1".$myModal."'>
												<img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
											</div>							 
											 
											<!-- mascara para cobrir o site -->  
											<div id='mascara'></div>										

											 ";
									$myModal++;
									}
								}									
							
							?>
						</div>
						
					</div>
						
					</div>

E este é o jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
			<script type="text/javascript">
			$(document).ready(function(){
				var content = $('#portifolio');

				//pre carregando o gif
				loading = new Image(); loading.src = 'images/loading_ajax.gif';
				$('#portifolio a').live('click', function( e ){
					e.preventDefault();
					content.html( '<img src="images/loading_ajax.gif" />' );

					var href = $( this ).attr('href');
					$.ajax({
						url: href,
						success: function( response ){
							//forçando o parser
							var data = $( '<div>'+response+'</div>' ).find('#portifolio').html();

							//apenas atrasando a troca, para mostrarmos o loading
							window.setTimeout( function(){
								content.fadeOut('slow', function(){
									content.html( data ).fadeIn();
								});
							}, 500 );
						}
					});

				});
			});
		</script>