…
Olá, em um post anterior eu comentei sobre o LightBox e prometi falar um pouquinho sobre ele, então vamos lá.
O LightBox, resumidamente e a grosso modo, é um conjunto de bibliotecas JavaScript que são utilizadas para exibição de fotos e imagens onde o efeito é realmente muito surpreendente, muito bonito, ao menos eu acho.
Bem, não vamos programar nada, como eu disse o LightBox é uma biblioteca e portanto já está prontinha para usarmos, usaremos um exemplo bem simples exibindo apenas 2 fotos / imagem.
Então, como de costume, vamos ao HTML com o index.html ou index.php como preferir.
<html>
<head>
<title>.: LightBox :.</title>
<link rel=”stylesheet” href=”css/galeria.css” type=”text/css” media=”screen” />
<!– incluindo os arquivos da biblioteca LightBox–>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
</head>
<body>
<div id=”galeria”>
<ul>
<a href=”fotos/image1.jpg” rel=”lightbox[roadtrip]“>
<img src=”fotos/image1.jpg” class=”thumb”></a>
<a href=”fotos/image2.jpg” rel=”lightbox[roadtrip]“>
<img src=”fotos/image2.jpg” class=”thumb”></a>
</ul>
</div>
</body>
</html>
O arquivo galeria.css
body{
background-color:#000000;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
.thumb{
border:1px solid #fff;
border-bottom:10px solid #fff;
padding:2px;
width:120px;
height:100px;
}
Acima um exemplo bem simples da utilização do LightBox, é interessante criar a galeria utilizando miniaturas(thumbs) geradas automaticamente pelo PHP e você pode ver como criar miniaturas de fotos em outro post ‘ Criar Thumb (miniatura) com PHP‘.
Vamos continuar no LightBox, as linhas que adicionam o javascript, e elas são 3, são necessárias para que o lightbox funcione, então ao baixar o lightbox, descompacte-o e mantenha os arquivos nos seus diretórios originais, o arquivo lightbox.css também é necessário, então se você precisar de formatação CSS ou funções javascript, crie outros (js e css) arquivos preservando os do lightbox ok.
Agora você me pergunta, onde está a galeria a que se refere no título e eu lhe respondo junte 2 Posts desse blog e você terá uma galeria! ;)
De toda forma minha intenção não foi de explicar como funciona o LightBox e sim de dizer que ele existe, é muito fácil de usar e o principal de tudo o visual é perfeito… então procurem um pouco no google e encontrarão muita coisa a respeito do LightBox!
Para baixar o lightbox em sua última versão visite LightBox aproveite e dê uma navegada no site deles, tem muitos exemplos legais lá.
O link para ver o Exemplo funcionando
E agora como eu sou muito bonzinho ;) o download de tudo pronto download
Até o próximo Post.
44 Comentários até o momento
Deixe um comentário
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Ficou show de bola, funcionou certinho!!
Comentário por Junior Maio 14, 2008 @ 4:44 pmParabens pelo Blog. Continue assim.
Muito bom o tutorial e a galeria realmente e muito bacana … o efeito e show de bola ! Valeu, parabens!
Comentário por rafael Agosto 28, 2008 @ 2:46 pmGostaria de ver tutoriais ensinando a utilizar FrogJS Javascript Gallery e jqGalScroll. Grato!
Comentário por Thor Setembro 10, 2008 @ 2:14 pmThor, dê uma olhada ai:
http://www.puidokas.com/portfolio/frogjs/
abraços.
Comentário por Rafael Clares Setembro 10, 2008 @ 2:52 pmparabens !!
Muito bom o tutorial e a galeria realmente fico nota 10.
Comentário por thiago Dezembro 2, 2008 @ 1:21 pmcra muito simples mesmo , tava precisando estudar este tipo de codigo css , muito bacana , valeu ….
Comentário por Johnatan Dezembro 12, 2008 @ 2:42 pmolá, sou novato na área e gostaria de saber se tem como mudar o tamanho da miniatura e se tem jeito de colocar uma string contendo a descrição da imagem.
Comentário por EDSON FERNANDES Janeiro 15, 2009 @ 1:38 amDesde já deixo meus agradecimentos.
Ola Edson,
tem como colocar sim, para colocar a descrição da imagem basta adicionar o atributo title na tag, veja:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="descricao foto">
Quanto ao tamanho você pode mudar no CSS onde a classe .thumb mantem as dimensoes da miniatura, veja:
Na classe .thumb do arquivo galeria.CSS
width:120px; // altere aqui a largura
height:100px; // e altere aqui a altura
Abraços,
Comentário por Rafael Clares Janeiro 15, 2009 @ 2:37 amEi moral, como faz pra colocar mais fotos
Comentário por arimoral Janeiro 22, 2009 @ 3:39 amGaleria de Fotos com o LightBox eu tenho que auterar todavia o index???…dá adica aí moral, parabens pelo site muito bom mesmo
Existe outro Post explicando como fazer. Veja aqui.
Comentário por Rafael Clares Janeiro 23, 2009 @ 12:36 pmMuito boa a explicação, até eu que não sei quase nada de html, php, css… consegui fazer funcionar…
Comentário por Róger Klein Fevereiro 10, 2009 @ 1:28 pmmuito boa mesmo….
vlwwww
Eu tenho uma perguntinha….
Comentário por Róger Klein Fevereiro 10, 2009 @ 3:44 pmtalves tenha um tuto sobre a minha questão…
eu procurei e não achei…
mas, a questão é a seguinte…
Eu tenho várias fotos para colocar em um site, mas algumas fotos estão com as dimensões diferentes umas das outras, então eu gostaria de saber como posso redimensionar os thumbs uma a uma, pra não ficar fotos espichadas…
att.
Olá Róger, você pode trocar o tamanho fixo das thumbs por percentual, você pode usar por exemplo, thumbs de 30% das dimensões originais da imagem, dessa forma você terá miniaturas com tamanhos personalizados automáticamente. Até logo,
Comentário por Rafael Clares Fevereiro 10, 2009 @ 4:35 pmCara… valeu pela dica… deu certinho como eu queria…
Comentário por Róger Klein Fevereiro 10, 2009 @ 4:41 pmMuito bom o seu site ai…. to aprendendo muito com vc…
abrçs
flws…..
Róger, que bom cara!
Comentário por Rafael Clares Fevereiro 10, 2009 @ 4:44 pmObrigado pelo comentário,
abraços
Surgiu outra dúvida….
Comentário por Róger Klein Fevereiro 17, 2009 @ 11:22 pmComo posso fazer pra colocar fotos em outra coluna do site??
Olá Roger, desculpe minha falta de interpretação mas não entendi muito bem o que quer fazer!
Comentário por Rafael Clares Fevereiro 18, 2009 @ 3:51 pmSe for criar um unico sistema para colocar fotos por categoria em diferentes áreas do site, você pode
criar outros diretórios para o upload e no momento do upload informar para qual pasta vai a foto, vc pode por ex. adicionar ao form de envio uma lista combo com o nome de cada diretorio/categoria…..
Espero que seja isso que quer fazer….hahahaha
se não for me explica melhor aí…
abraços,
Bom… não é bem isso, eu me expressei mal…. eu quero fazer o alinhamento das fotos na página, e não estava conseguindo, mas agora consegui atras do comando hspace e vspace, acho q não é a melhor maneira de se fazer o alinhamento das fotos, mas foi a única forma que encontrei… gostaria que me desse alguma dica quanto a isso… vlw pela atenção…
Comentário por Róger Klein Fevereiro 18, 2009 @ 4:54 pmabrçs
Parabéns pelo Tutorial Rafael,
Comentário por Paulo Fevereiro 22, 2009 @ 2:15 amQueria tirar uma dúvida contigo:
Gostaria de usar o efeito em fotos que já estão no diretório do site, consegui implantar, mais só reconheceu 9 fotos e não criou as miniaturas, voce teria uma dica pra me passar?
Olá Paulo, amigo você pode me enviar zipado sua galeria (nao precisa ser todas as fotos) dai vejo pra vc,
Comentário por Rafael Clares Fevereiro 26, 2009 @ 3:55 pmpq não vi ainda isso, então me manda ae rafadinix@gmail.com, dependendo do que for já te mando de volta funcionando..
Obrigado pelo comentário,
abraços
olá, o seu site é muito bom…
tem como mudar o tamanho que a foto será exibida?
Comentário por valois Março 9, 2009 @ 5:49 pmValois, não sei! Não entendo de Flash!
Comentário por Rafael Clares Março 10, 2009 @ 3:20 pmDá uma olhada ai :
http://www.ffiles.com/flash/photo_galleries/
Bom dia chará :P
Comentário por Rafael Abril 28, 2009 @ 1:40 pmestou com uma dúvida quando chamamos as imagens em minuatura no css elas são carregadas com o tamanho de bits real ou com o tamanho de uma miniatura?
Olá Rafa,
pow cara acredito que não porque ela mantém a qualidade da imagem, nesse caso o ideal seria criar thumbs,
existe um outro post que mostra como fazer utilizando thumbs, dá uma lida!
http://clares.wordpress.com/2009/01/16/galeria-de-fotos-lightbox-upload-de-fotos-painel-admin/
Obrigado pelo comentário/pergunta;
abraços
Comentário por Rafael Clares Abril 30, 2009 @ 12:13 pmGrande amigo, perfeito trabalho,
Comentário por Bruno Maio 8, 2009 @ 6:12 pmporém as miniaturas precisam estar dentro de um php? abraços
Olá Bruno,
Comentário por Rafael Clares Maio 8, 2009 @ 6:18 pmnão precisa chamar as miniaturas dentro de uma página PHP!
obrigado pelo comentário.
abraços
Sério mesmo amigo? entao posso dar sequencia na galeria sem me preocupar com php?
Comentário por Bruno Maio 8, 2009 @ 6:30 pmGrande Rafel Consegui fazer galeria, mais uma vez obrigado por seu serviços de compartilhar ideias e etc, a unica coisa que nao ficou legal, foi que nao aparece o button para avançar ou voltar… tem ideia onde eu possa verificar onde eu possa ter errado? grande abraco!
Comentário por Bruno Maio 8, 2009 @ 10:03 pmAe Brunao, dá uma olhada no CSS se está apontando para o local certo e se as imagens estão realmente lá….estranho isso ae hein …só você reclamou disso até agora… boa sorte!!!
Comentário por Rafael Clares Maio 13, 2009 @ 6:55 pmtem como eu abrir no lugar da imagem um formulario exemplo ou uma parte de uma pagina tipo frameset?
Comentário por weverton o. Reis Junho 4, 2009 @ 6:32 amWeverton, tem sim mas não é o propósito do post.
Dê uma buscada no google por “Window Modal” ou “Javascript Modal Window” …
http://www.google.com.br/search?hl=pt-BR&q=Window+Modal
abraços
Comentário por Rafael Clares Junho 8, 2009 @ 2:40 pmbom dia, cara não consegui baixar o “Tudo pronto que você deixou para download.
Comentário por Renato Vitor Setembro 23, 2009 @ 2:25 pmRenato, sei que vai parecer uma resposta padrão mas … “Comigo funcionou”
Acabei de testar o download e baixei o arquivo no mesmo link que aparece “tudo pronto” rs rs
até
Comentário por Rafael Clares Setembro 23, 2009 @ 2:52 pmbom dia….cara deu certo a galeria…mas as imagens thumbs ficaram distorcidas….tem alguma dica
Comentário por Renato Vitor Setembro 24, 2009 @ 1:16 pmRenato, tenho sim …
Comentário por Rafael Clares Setembro 24, 2009 @ 1:19 pmMas me diga, quais dimensões originais da imagem e para quais dimensões está mudando?
Você alterou algo no arquivo .php ?
No aguardo,
abs
Rafael,
A imagem que irá abrir com o efeito lightbox é de 300×300 pixels e a miniatura é de 100×100 pixels
No aguardo…abraços
Comentário por Renato Vitor Setembro 24, 2009 @ 1:30 pmBruno,
Comentário por Rafael Clares Maio 8, 2009 @ 6:38 pmisso mesmo!
Amigo me perdoa a ignorancia, mas o certo é criar os thumb manualmente quando nao utiliza o arquivo php? obrigado
Comentário por Bruno Maio 8, 2009 @ 7:29 pmSim,
Comentário por Rafael Clares Maio 8, 2009 @ 8:03 pmse não vai utilizar o arquivo thumbs.php para gerar a miniatura, então deverá criar as miniaturas ou definir a largura e altura dentro da TAG IMG (width e Height). Abraços
Renato, compacta seu exemplo e me envia em: rafadinix@gmail.com.
Comentário por Rafael Clares Setembro 24, 2009 @ 1:42 pmflw
ta ok….vou lhe enviar…
Uma pergunta. Posso alterar o tamanho da imagem em algum software…photoshop ou fireworks?
Comentário por Renato Vitor Setembro 24, 2009 @ 1:52 pmPode sim, claro, normalmente!!!
Comentário por Rafael Clares Setembro 24, 2009 @ 2:04 pmquero dizer….o tamanho das muniaturas…tbém posso?
Comentário por Renato Vitor Setembro 24, 2009 @ 2:50 pmRenato, acho que será mais fácil eu ver seu código, assim consigo te dizer o que está errado.
Comentário por Rafael Clares Setembro 24, 2009 @ 3:13 pmaté,