Publicado em 3 de mai.

Lightbox

Boa tarde, sou novata nesse fórum, não sei absolutamente nada em ajax, e quero aprender.

Estou desenvolvendo um site e gostaria de fazer um lightbox para conteúdo e imagem

No caso tem o link SISTEMA UM

e quando eu clicasse nesse link, abrisse uma janela (não em outra página!) mas aquelas janelas do lightbox mesmo, mostrando o conteúdo referente ao sistema , com next e back. Agradeço desde já toda a ajuda de vcs, e por favor gostaria que vcs me indicassem alguns tutoriais bons para mim aprender isso.

Grata. ^_^

PS: Já estou lendo alguns dos artigos.

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

sabia.net· 6 de mai.

olá estou com um ligthbox pronto

mas acho que para uma melhor comprrensão seria melhor lhe enviar o arquivo compactado

queria lhe perguntar se o site que esta fazendo contem consultas em php e sql

Estou postando o código

1° passo: deve baixar a biblioteca juery no site oficial do jquery

2° extrair em seu pc e depois criar uma pasta js ou nome que desejar e colar o arquivo dentro da mesma.

No código html faremos menção a este

3º Agora vou disponibilizar os códigos propriamente ditos:

obs: Repare que o ligthbox e tudo que faz referência a ele estão na css como display none ou seja ocultos

Procure os icones da bandeira da alemanha e da bandeira dos estados unidos e coloque conforme está no codigo na tag img

<!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%22)

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>ligth box</title>

 

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

<script>

$(document).ready(function(){ // ao ler o documento

 

	$(".miniaturas li a").click(function(){	//ao clicar na classe miniaturas a executa função

 

	/*------------------------obtendo o conteúdo----------------------------*/

 

 titulo=$(this).attr("href") // variável titulo recebe o atributo href do objeto clicado ver atributos no html

 

 detalhes = $(this).attr("title") // variável detalhes recebe o atributo title do objeto clicado ver atributos no html

/------------------------ posicionando o conteudo obtido----------------------------/

$(".header h1").html(titulo)

$(".detalhes").html(detalhes)

/------------------------ Exibindo os conteudos ----------------------------/

$(".litebox").animate({opacity:0.7}).slideDown("slow")//exibe o lite box

$(".lite_conteudo").slideDown("slow") //exibe o lite_conteudo

 return false;	// retorna false pois não irá visitar nenhum link

 

 

})

 

	$(".litebox").click(function(){ // 2ª função ao clicar em .litebox

 

 $(this).slideUp("slow") // este irá desaparecer com slideUp

 $(".lite_conteudo").slideUp("slow")//este irá desaparecer com slide up

 })

}) // fim do ao ler o documento

</script>

<!--

.litebox {

	background-color: #000000;

	text-align: center;

	float: left;

	height: 100%;

	width: 100%;

	position: absolute;

	z-index: 3;

	left: 0px;

	top: 0px;

	display:none;

	cursor:pointer;

	cursor:hand;

}

 

 

.lite_conteudo {

	text-align: center;

	margin: auto;

	float: left;

	width: 100%;

	position: absolute;

	z-index: 1;

	left: 0px;

	top: 0px;

	display: none;

	cursor:pointer;

	cursor:hand;

}

.tabela {

	width: 300px;

	margin-right: auto;

	margin-left: auto;

	margin-top: 60px;

 z-index: 2;

}

 

.header{

	padding: 0px;

	margin: 0px;

	background-color: #0000CC;

}

.header h1 {

	color: #FFFFFF;

 

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	padding-top: 10px;

	padding-bottom: 10px;

	margin: 0px;

}

-->

.detalhes {

	width: 100%;

	margin: 0px;

	text-align: left;

	padding: 5px;

}

-->

</style>

 

 

</head>

 

<body>

<div class="litebox">

<div class="lite_conteudo">

 

 

<table width="10%" border="1" cellspacing="0" cellpadding="0" class="tabela" bgcolor="#FFFFFF">

 <tr>

 <td width="256" class="header"><h1></h1></td>

 <td width="38" class="header"><div align="center"><img src="images/icones/fechar.gif" width="16" height="16" /></div></td>

 </tr>

 <tr >

 <td colspan="2" class="detalhes"> </td>

 </tr>

</table>

</div>

 

</div>

 

<div class="miniaturas">

 <ul>

 <li><a href="Estados Unidos" title="Pais Norte Americano, seu presidente é o Barack Obamah">

 

 <img src="images/bandeiras/bandeira_usa.jpg" border="0" /><!--imagens-->

 

 </a> </li>

 

 <li>

 <a href="Alemanha" title="Pais Europeu onde faz muito frio

 mas mesmo assim a cerveja é

 bem gelada">

 

 <img src="images/bandeiras/bandeira_alemanha.jpg" border="0" /><!--imagens-->

 

 </a> </li>

 

 </ul>

</div>

</body>

</html>

Espero que tenha sido útil