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'>   Todos </a></li>";
// Exibe o resultado da consulta
while ($row = mysql_fetch_object($result)) {
echo "<li>
<a href='?id=$row->id#bloco03'>   $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">
$(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>
$id_categoria = $_GET['id'];
- Off: Tenha cuidado com linhas onde você pega o que o usuário envia e manda diretamente para o banco de dados. Recomendo uma leitura deste artigo.