Olá pessoal,
Estou com problema para fazer funcionar o FancyBox do jQuery.
Tenho uma página chamada frame.jsp e carrego minha página fotos.jsp na div id=“conteudo”:
<div id="geral">
<div id="topo"><%@ include file="topo.jsp" %></div>
<div id="menu"><%@ include file="menu.jsp" %></div>
<div id="conteudo"><jsp:include page="${param.link}"/></div>
<div id="direita"></div>
<div id="rodape"><%@ include file="rodape.jsp" %></div>
</div>
Se eu deixar o código dentro da página fotos.jsp o FancyBox não funciona. Verifiquei o código fonte e o conteúdo da página fotos.jsp não é carregado porém é exibido.
Então tirei da página fotos.jsp e deixei na frame.jsp, mas tive problema pois o efeito do FancyBox fica em todos os links do site já que ele aplica nas tags “”, até no menu, prém quero o efeito apenas em determinadas fotos. Tem como?
Tentei trocar a linha “$(“a”).fancybox();” por “$(“z”).fancybox();” e criar uma tag z, mas não funciona.
Código fancyBox:
<!-- FancyBox -->
<link rel="stylesheet" type="text/css" href="script/jquery.fancybox/jquery.fancybox.css" media="screen"/>
<script type="text/javascript" src="script/jquery.fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="script/jquery.fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script/jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").fancybox();
});
</script>
<!-- /FancyBox -->
Código da foto:
<a href="img/capas/poster_${filme.capa}">
<img src="img/capas/${filme.capa}" alt="" title="Visualizar Poster!" width="115" height="150"/>
</a>
Bem pessoal, a questão de direcionar o efeito do FancyBox consegui resolver, basta indicar o id do elemento no qual quero aplicar o efeito, porém antes AINDA deve ser especificado a tag, era ai meu erro, veja como ficaria o código agora:
$("a#fancy").fancybox(); // Para todas as tags 'a' com id "fancy" (:
Porém continuo com o problema do carregamento do Ajax não escrever o conteúdo no código fonte no qual visualizo pelo atalho Ctrl + U. O código escrito no fonte fica apenas da primeira página carregada, e qualquer outra que eu der um innerHTML somente é apresentada na tela, porém o código fonte não muda, e é ai que acho que se encontra o erro.
Código Ajax:
// Link que chama a página ajax
<li><a href="javascript:void(0)" onclick="openPage('home.jsp?np', 'conteudo')"><fmt:message key="inicio"/></a></li>
[/code][code]
// Função de entrada do ajax
function openPage(url, targetIn){
var req = openAjax(document.getElementById(targetIn));
req.open("GET", url, true);
req.send(null);
}
// Função que istancia o ajax e carrega a página
function openAjax(target){
var req;
try {
req = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari e IE 7
} catch (e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); // IE
} catch (e){
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); // IE Antigo
} catch (e) {
alert("Seu browser não possue suporte para a tecnologia deste site!");
return false;
}
}
}
req.onreadystatechange = function() {
if(req.readyState == 3) {
target.innerHTML = "<div style='position:absolute; top:35%; left:55%;'><img src='img/loading.gif'/></div>";
} else if(req.readyState == 4 && req.status == 200) {
target.innerHTML = req.responseText;
}
}
return req;
}
[/code][code]
// Página JSP que suportará todo o site
<html>
<head/>
<body class="bgColor">
<div id="geral">
<div id="topo"><%@ include file="topo.jsp" %></div>
<div id="menu"><%@ include file="menu.jsp" %></div>
<div id="conteudo"><jsp:include page="home.jsp"/></div>
<div id="direita"></div>
<div id="rodape"><%@ include file="rodape.jsp" %></div>
</div>
</body>
</html>
Alguém poderia me ajudar?
Valeu galera. =)