Ir para conteúdo

POWERED BY:

Arquivado

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

Alex_ps

[Resolvido] Galeria de imagens com função Lightbox

Por , em Javascript

Recommended Posts

Alex_ps    0

Alex_ps
Postado

Oi amigos,

 

Estou procurando um script super específico mas comumente visto em lojas e como não encontrei, resolvi eu mesmo fazer um, mas está dando erro.

A idéia é mostrar uma imagem pequena em um espaço pequeno, com uma tag abaixo com os links 1, 2, 3, 4, 5, 6... Cada vez que o usuário clica em um link, ele abre na caixa pequena a imagem referente aquele link.

Até aí existem vários scripts que fazem, o problema é que, depois que estes scripts chegam nesta situação, eu preciso que, ao clicar na foto pequena, ela amplie e ganhe o efeito Lightbox, ou pelo menos amplie ao estilo jquery.

Como sou programador ASP, não entendo muito de javascript, pensei em fazer uma função e chamá-la com a href, que seriam os links nos números 1, 2, 3...

Eu fiz isto e passei a informação, mas:

- No firefox o browser fica rodando como se alguma coisa estivesse em execução ainda e,

- Depois de iniciar a execução do 'document.write("teste1")', os outros links 2,3,4,5,6... não aparecem mais na página, e isto não pode acontecer, já que o restante da página não pode sumir.

Bem imagino que eu precise criar uma hierarquia de uma div e jogar a informação do link dentro dela, mas esta informação terá que ir para dentro de um outro a href, que é o que chamará a função de exibir imagem grande.

Alguém pode ajudar, por favor?

 

Obrigado!

 

Alex

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eliseu M.    2

Eliseu M.
Postado

Não encontrou? Existe centenas Imagem Postada

 

http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

 

São fáceis de instalar. Vejo que outro problema aí seja a lista de imagens para a galeria. Isso é simples, faça com DIVs ou UL LI mesmo... é só adicionar o atributo rel="lightbox" (no caso do LightBox) e tudo vai funcionar Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex_ps    0

Alex_ps
Postado

Eliseu,

 

Não sei se, não me expressei direito, mas tanto nos exemplos que você me enviou como em todos os outros que vi na página de plugins do jquery, todos oferecem a opção de "slide" de (1,2,3,4,5,6) só depois que a imagem já saiu do estado pequeno para grande. Não é o que eu preciso.

Eu preciso que, primeiro a pessoa possa navegar entre pequenas imagens usando (1,2,3,4,5,6), depois de chegar na que ele quer, aí sim ele abre a imagem para grande.

Minha idéia inicial seria deixar um div invisível (de vários - 1, 2, 3, 4, 5...)aparecer quando a variável referente a sua foto fosse selecionada. Neste caso ele mostraria a imagem pequena, mas já sendo o link (rel)para abrir a imagem grande.

Foi quando eu tentei utilizar a função que pareceu estar em execução, conforme escrevi abaixo.

Por gentileza, como eu faço esta parte de exibir um ou outro conteúdo dentro de um mesmo espaço?

 

Que fazer algo do tipo:

 

<div id="pop" style="display:none">
Imagem 1
</div>
<div><a href="#" onclick="document.getElementById('pop').style.display='block';">1</a></div>

Só que no caso, a imagem 1 surgira depois do primeiro click.

Eu preciso que ela seja default e quando o usuário clicar nos outros números, elas se substituam uma a uma.

Esta é a parte que eu não sei fazer.

 

Obrigado.

Alex

 

Bom amigos,

 

A parte inicial do problema fica assim:

 

<html>
<head runat="server">
<script type="text/javascript">
function AlterarConteudo(y) {
   var divTeste = document.getElementById('divTeste');
   if (y == 1) { divTeste.innerHTML = 'Conteúdo 1' }
   if (y == 2) { divTeste.innerHTML = 'Conteúdo 2' }   
   if (y == 3) { divTeste.innerHTML = 'Conteúdo 3' }
   if (y == 4) { divTeste.innerHTML = 'Conteúdo 4' }   
   if (y == 5) { divTeste.innerHTML = 'Conteúdo 5' }
   if (y == 6) { divTeste.innerHTML = 'Conteúdo 6' }   

}
</script>
</head>
<body>
<div id="divTeste">Conteúdo inicial</div>

<a href="#" onclick="AlterarConteudo(1);">1</a> 
<a href="#" onclick="AlterarConteudo(2);">2</a> 
<a href="#" onclick="AlterarConteudo(3);">3</a> 
<a href="#" onclick="AlterarConteudo(4);">4</a> 
<a href="#" onclick="AlterarConteudo(5);">5</a>
</body>
</html>

Agora, vou colocar a Função Lightbox.

 

Obrigado a todos.

Alex

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