Ir para conteúdo
Fórum Script Brasil
  • 0

(RESOLVIDO)Lightbox

Añd®é™

Perguntado por Añd®é™,

 Share

Pergunta

Añd®é™

Añd®é™

Postado
Postado (editado)

Gostei do lance de abrir a imagem no sombreado, só que quebrei a cabeça e não consegui fazer isso na minha pagina, pois não sei onde devo por os bagulhos que dizem pra fazer download, dizem pra baixar, colocar codigos na pagina e não dizem o que fazer com o que eu baixei, pra onde eu mando os tres trequinhos que eu baixei, tem uma pasta de imagem um codigo e um scrpt.

ta dificil mais parece não ser tão complicado, é questão de saber aonde posicionar, se alguém puder me ajudar fico agradecido.

Editado por Añd®é™
Link para o comentário
Compartilhar em outros sites

21 respostass a esta questão

Posts Recomendados

  • 0
Rico Crivelli

Rico Crivelli

Postado
Postado

Parte I - Configurando

1. Baixe o Lightbox 2

2. O Lightbox2 usa efeitos do Sciptaculous e o framework do Prototype então você precisa adicionar o seguinte código a sua <head>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
3. Inserir o CSS do Lightbox2 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
4. Verifique o css e tenha certeza que os arquivos prev.gif e next.gif estão localizados corretamente e loading.gif e close.gif no arquivo lightbox.js. Parte II - Ativando 1. Adicione o código rel="lightbox" em qualquer link para ativar o lightbox, por exemplo: 
<a href="imagens/imagem-1.jpg" rel="lightbox" title="minha legenda">imagem #1</a>
2. Você pode relacionar um grupo de imagens assim elas terão como ir para proxima ou anterior. 
<a href="imagens/imagem-1.jpg" rel="lightbox[plantas]">imagem #1</a>
<a href="imagens/imagem-2.jpg" rel="lightbox[plantas]">imagem #2</a>
<a href="imagens/imagem-3.jpg" rel="lightbox[plantas]">imagem #3</a>

Até mais ^_^

Link para o comentário
Compartilhar em outros sites
  • 0
Añd®é™

Añd®é™

Postado
  • Autor
Postado

Bom essa parte eu já li varias vezes nos tutoriais, e já tentei milhares de vezes colocar na pagina, mais o que eu não sei é o que fazer com os arquivos do lightbox que eu baixo, entende?

Tipo onde eu colocarei as pastas, onde seria a tal raiz do site?

Outra duvida, eu uso o FTP, uma vez que estes arquivos estiverem no servidor de hospedagem eu devo nomea-los a pasta deles e transforma-los em INDEX?

Essas são as principais duvidas que eu estou no momento, que é onde por os arquivos, todos dizem pra baixar, mais o que fazer não colocam nos tutorias, ou colocam mau explicado, me dificultando ainda mais.

Forte Abraço Amigo Se Souber Algo Que Possa Me Ajudar Ficarei Agradecido!!

ATÉ!!!

Link para o comentário
Compartilhar em outros sites
  • 0
Henderson

Henderson

Postado
Postado

cara, é o seguinte..

você vai querer colocar esses efeitos em uma página sua já existente, certo?

portanto, suponhamos que essa página seja "imagens.html"

o que você vai fazer é abrir a imagens.html e colocar os códigos como o Rico falou, entre as tags <head> e </head> do seu código

depois, você coloca os arquivos na mesma pasta, no seu servidor

esses arquivos, são referenciados pelo código que o Rico passou

então, você tem qe respeitar a hierarquia de pastas, então vai ficar assim

imagens.html em algum lugar do seu site

nesse mesmo lugar vão ter duas pastas, "js" e "css"

na pasta js, os seguintes arquivos

prototype.js

js/scriptaculous.js

js/lightbox.js

na pasta css o arquivo

lightbox.css

tem mais arquivos no lightbox? não me lembro, mas creio que não

é isso, é simples, você só tem que respeitar a hierarquia das pastas

quando você baixa o lightbox elas já vem na ordem certa, é só mandar pro server, pro mesmo local onde tá o arquivo que você quer aplicar os efeitos e pronto

Link para o comentário
Compartilhar em outros sites
  • 0
Henderson

Henderson

Postado
Postado

como já foi dito, você põe os códigos que te passei entre as tags head..

as imagens que você quer que tenham o efeito, você faz o seguinte

você tem a imagem

<img src="urldaimagem.jpg">

então você transforma ela num link

<a href="urldaimagem.jpg"><img src="urldaimagem.jpg"></a>

e adiciona o atributo rel, ficando assim

<a href="urldaimagem.jpg" rel="lightbox" ><img src="urldaimagem.jpg"></a>

como também já foi te dito

não é difícil cara, preste atenção no qe tá sendo falado pra ti que você consegue!

Link para o comentário
Compartilhar em outros sites
  • 0
Añd®é™

Añd®é™

Postado
  • Autor
Postado (editado)

Fiz tudo conforme você disse mais não deu resultado mesmo, infelizmente tem algo errado vou relatar todo o procedimento que fiz

1 baixei o Ligthbox onde o rico falou.

2 coloquei ele no local onde eu hospedo o site

3 fiz tudo como você disse, as linhas de codigo do js e a do css

4 coloquei a pagina no mesmo local do diretorio dos arquivos lightbox

o que eu fiz de errado, se coloquei as url nos locais indicados e todo esse procedimento?

Editado por Añd®é™
Link para o comentário
Compartilhar em outros sites
  • 0
Añd®é™

Añd®é™

Postado
  • Autor
Postado

Eu consegui fazer com uma só, mais o editor que eu us não está aceitando a linha de codigo e ta dando pane, ai fica sinistro, mais deu certo agora sei onde ponho os arquivos, outra coisa a legenda não consegui fazer funcionar, mais não tem tanto problema, to aprendendo aos poucos essa parte de light box, valeu mesmo pela ajuda o seu codigo funcionou legal mesmo.

minha pagina ta nesse link ai a imagem relacionada ao transito ta funcionando legal as outra eu ainda não consegui pois estou sem o editor pra todos os casos e achar uma a uma no bloco de notas e fogo.

www.vassourasurgente.com

Forte Abraço!!!

Link para o comentário
Compartilhar em outros sites
  • 0
Añd®é™

Añd®é™

Postado
  • Autor
Postado

Agora consegui fazer em todas valeu mesmo amigão sem sua ajuda não teria conseguido, mais deixa eu te perguntar outra coisa, como eu teria que fazer pra tirar a borda roxa da imagem, ou pelo menos trocar a cor dela, ta ficando meio feia a pagina por conta disso.

Abraço!!!

Link para o comentário
Compartilhar em outros sites
  • 0
Añd®é™

Añd®é™

Postado
  • Autor
Postado

No caso seria desta forma:

<img src="..." height="..." width="...">border=0
ou 
<img src="..." height="..." width="..." border=0>

kkkkkkkkkkkkk, ta complicado esse treco, não vou negar que fica super moderna a página, mais dá um trabalhooo.

Link para o comentário
Compartilhar em outros sites
  • 0
Añd®é™

Añd®é™

Postado
  • Autor
Postado

Agora pode fechar aqui Sr Moderador, mais antes deixa uma mensagem respondendo a seguinte pergunta.

Eu mesmo posso colocar no titulo do tópico que esta resolvido?

Se a resposta for positiva antes de fechar deixa a explicação de como fazer, por favor, depois fecha que está resolvido já.

Até.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...