• 0
Sign in to follow this  
Añd®é™

(RESOLVIDO)Lightbox

Question

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.

Edited by Añd®é™

Share this post


Link to post
Share on other sites

21 answers to this question

Recommended Posts

  • 0

vamos lá, pegue uma página em branco e comece a colocar os scripts, quando não tiver mais jeito, posta aqui a página que te ajudamos!

Share this post


Link to post
Share on other sites
  • 0

Pera ai deixa eu ver se entendi, eu abro um por um os scrips e copio e colo na futura pagina HTML? é isso?

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

Desculpe ae mais retirei o codigo tava muito gigante pra ficar aqui no forum, e de nada estava adiantando.

Abraço!!!

Edited by Añd®é™

Share this post


Link to post
Share on other sites
  • 0

tá.. agora..

o qe você não entendeu do qe eu expliquei?

é só fazer o qe eu disse, não tem segredo.

dá pra colocar, claro que dá, dá em qualquer página..

Edited by Henderson

Share this post


Link to post
Share on other sites
  • 0

Mai seria aonde ali dentro daquele codigo que eu teria que por os scrpts, e aonde eu ponho as url das imagens?

Share this post


Link to post
Share on other sites
  • 0

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!

Share this post


Link to post
Share on other sites
  • 0

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?

Edited by Añd®é™

Share this post


Link to post
Share on other sites
  • 0

você tem essa página online? algum link que possa ver? aí facilita bastante..

senão, posta o código da tua página inteiro..

mas um link seria melhor, porque daria pra eu ver s você tá colocando os arquivos nos locais certos

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

Funcionou tudo agora, ta déz a pagina, sem border abrindo o lightbox perfeitamente tudo beleza e acho que agora resolveu sim, valeu ae pela a ajuda!!!

Abraço a Todos da Script Brasil!!!

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this