Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Meh

Lightbox

Por , em Javascript

Recommended Posts

Meh    0

Meh
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

sabia.net    0

sabia.net
Postado

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">

<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>

 

<!-- Repare que na linha anterior fizemos menção ao jquery-->

 

 

 

<!-- Scripts de ação-->

<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>

 

 

<!--Scripts de estilo-->

 

 

<style type="text/css">

<!--

 

 

.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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito