Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde, já utilizo um sistema de carregamento de pagina em uma div sem refresh...
Aconte que preciso carregar uma galeria de fotos que possiu efeitos da Jquery.
So que os efeitos não funciona, e quero saber se realmente usando este metodo sem refresh eu não vou conseguir usar efeitos da pagina carregada na div?
Ok vou tentar...
Uso essa função que funcionar normal, para carregar pagina em uma div sem dar refresh na pagina inteira.
ajax.js
function GetXMLHttp() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
}
catch(ee) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
xmlHttp = false;
}
}
}
return xmlHttp;
}
var xmlRequest = GetXMLHttp();e instrucao.js
function abrirPag(valor){
var url = valor;
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.open("GET",url,true);
xmlRequest.send(null);
if (xmlRequest.readyState == 1) {
document.getElementById("conteudo").innerHTML = "<img src='img/logo2.png'>";
}
return url;
}
function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("conteudo").innerHTML = xmlRequest.responseText;
}
}na index.php tenho:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/css.css" type="text/css" media="all" />
<title>Núcleo Educacional Cantares</title>
<script src="js/ajax.js" type="text/javascript"></script>
<script src="js/instrucao.js" type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>
<div id="tudo">
<div id="topo"></div>
<div class="menu"></div>
<div id="btn">
<table width="687" border="0">
<tr>
<td><a href="#" onclick="abrirPag('home.php');"><img src="img/btnhome.png" border="0"/></a></td>
<td><a href="#" onclick="abrirPag('mostra.php');"><img src="img/btnfotos.png" border="0"/></a></td>
<td><a href="#" onclick="abrirPag('estrutura.php');"><img src="img/btnestrutura.png" border="0"/></a></td>
<td><a href="#" onclick="abrirPag('contato.php');"><img src="img/btncontato.png" border="0"/></a></td>
</tr>
</table>
</div>
<div class="meio" id="conteudo"></div>
<div class="rodape"></div>
</div>
</body>
</html>O botao que chama a pagina abrirPag('mostra.php');
E dentro dela tem outra função para dar efeito nas fotos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">img {border: none;}
.container {
height: 360px;
width: 910px;
margin: -180px 0 0 -450px;
top: 50%; left: 50%;
position: absolute;
} float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
} margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
} width: 100px; height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
} background:url(img/thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
padding: 9px 0;
margin-left: 30px;
}
</style>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
</head>
<body>
<div class="container">
<ul class="thumb">
<?php do { ?>
<li><a href="img/<?php echo $row_galeria['grande']; ?>"><img src="img/<?php echo $row_galeria['grande']; ?>" alt="" /></a></li>
<?php } while ($row_galeria = mysql_fetch_assoc($galeria)); ?></ul>
<div id="main_view"><a title="" ><img src="" alt="" /></a><br />
</div>
</div>
</body>
</html>Aqui é so clicar no botão Fotos e Eventos (efeito não funciona)
http://www.hostmonsters.com.br/imasters/
E aqui onde o efeito funciona.
Você tá puxando o código jquery dentro do ajax.
Tira isso do mostra.php e coloca no index.php:
<script type="text/javascript" src="[url="view-source:http://www.hostmonsters.com.br/imasters/js/jquery-latest.js"]js/jquery-latest.js[/url]"></script>
<script type="text/javascript">
$(document).ready(function(){$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>Testa e avisa no que deu. Aconselho tirar tb todo css de lá e colocar no index deixando apenas a div container com o conteudo.Quando faço algo com ajax eu coloco todo css e jquery na página principal.
Abraço
Daniel não deu certo, da uma olha la.
mano você nao quer fazer o ajax com jquery tb nao?
se quiser da pra contornar isso tranquilo.
eu te ajudo.
Sim claro, se puder me ajudar agradeço.
Ou se tiver um tutorial pode me passar tambem.
add no msn
ok !
se ja tiver add manda um email com seu msn pois nao apareceu seu contato aqui.
Testa ai.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="[http://hostmonsters.com.br/imasters/css/css.css"](http://hostmonsters.com.br/imasters/css/css.css) type="text/css" media="all" />
<title>Núcleo Educacional Cantares</title>
<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">](http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js)
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('table a').click(function(e){
var pagina = $(this).attr('href');
$.post(pagina, function(data) {
$("#conteudo").empty().html(data);
});
$().ajaxError(function(){ alert('erro');});
e.preventDefault();
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<div id="tudo">
<div id="topo"></div>
<div class="menu"></div>
<div id="btn">
<table width="687" border="0">
<tr>
<td><a href="home.php"><img src="[http://hostmonsters.com.br/imasters/img/btnhome.png"](http://hostmonsters.com.br/imasters/img/btnhome.png) border="0"/></a></td>
<td><a href="mostra.php"><img src="[http://hostmonsters.com.br/imasters/img/btnfotos.png"](http://hostmonsters.com.br/imasters/img/btnfotos.png) border="0"/></a></td>
<td><a href="estrutura.php"><img src="[http://hostmonsters.com.br/imasters/img/btnestrutura.png"](http://hostmonsters.com.br/imasters/img/btnestrutura.png) border="0"/></a></td>
<td><a href="contato.php"><img src="[http://hostmonsters.com.br/imasters/img/btncontato.png"](http://hostmonsters.com.br/imasters/img/btncontato.png) border="0"/></a></td>
</tr>
</table>
</div>
<div class="meio" id="conteudo"></div>
<div class="rodape"></div>
</div>
</body>
</html>Daniel, ontem coloquei esse code seu, e deixei a function das fotos na pagina mostra.php e esta funcionando perfeitamente.
Muito obrigado pela ajuda.
http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif
De nada mano! Qualquer coisa posta ai.
abraço
Posta o código e explica melhor q não entendi direito.
abraço