…
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
Se preferir galeria com banco de dados: link
Não deixe de ver : http://clares.com.br/2010/11/04/galeria-de-fotos-lightbox-php/
Até o próximo Post.
Ficou show de bola, funcionou certinho!!
Parabens pelo Blog. Continue assim.
Muito bom o tutorial e a galeria realmente e muito bacana … o efeito e show de bola ! Valeu, parabens!
Gostaria de ver tutoriais ensinando a utilizar FrogJS Javascript Gallery e jqGalScroll. Grato!
Thor, dê uma olhada ai:
http://www.puidokas.com/portfolio/frogjs/
abraços.
parabens !!
Muito bom o tutorial e a galeria realmente fico nota 10.
cra muito simples mesmo , tava precisando estudar este tipo de codigo css , muito bacana , valeu ….
olá, 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.
Desde 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,
Ei moral, como faz pra colocar mais fotos
Galeria 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.
Muito boa a explicação, até eu que não sei quase nada de html, php, css… consegui fazer funcionar…
muito boa mesmo….
vlwwww
Eu tenho uma perguntinha….
talves 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,
Cara… valeu pela dica… deu certinho como eu queria…
Muito bom o seu site ai…. to aprendendo muito com vc…
abrçs
flws…..
Róger, que bom cara!
Obrigado pelo comentário,
abraços
Surgiu outra dúvida….
Como 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!
Se 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…
abrçs
Parabéns pelo Tutorial Rafael,
Queria 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,
pq não vi ainda isso, então me manda ae [email protected], 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?
Valois, não sei! Não entendo de Flash!
Dá uma olhada ai :
http://www.ffiles.com/flash/photo_galleries/
Bom dia chará 😛
estou 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
Grande amigo, perfeito trabalho,
porém as miniaturas precisam estar dentro de um php? abraços
Olá Bruno,
nã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?
Bruno,
isso mesmo!
Amigo me perdoa a ignorancia, mas o certo é criar os thumb manualmente quando nao utiliza o arquivo php? obrigado
Sim,
se 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
Grande 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!
Ae 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!!!
tem como eu abrir no lugar da imagem um formulario exemplo ou uma parte de uma pagina tipo frameset?
Weverton, 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
bom dia, cara não consegui baixar o “Tudo pronto que você deixou para download.
Renato, 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é
bom dia….cara deu certo a galeria…mas as imagens thumbs ficaram distorcidas….tem alguma dica
Renato, tenho sim …
Mas 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
Renato, compacta seu exemplo e me envia em: [email protected].
flw
ta ok….vou lhe enviar…
Uma pergunta. Posso alterar o tamanho da imagem em algum software…photoshop ou fireworks?
Pode sim, claro, normalmente!!!
quero dizer….o tamanho das muniaturas…tbém posso?
Renato, acho que será mais fácil eu ver seu código, assim consigo te dizer o que está errado.
até,
Parabéns pelo exemplo! agora tem como fazer o contrário-ou seja, uma imagem e abrir o litebox com as outras?
Neto, obrigado pelo comentário. Quanto a sua pergunta, não entendi muito bem o que deseja fazer.
Por um acaso é exibir uma miniatura e depois que clicar abrir um outra imagem?
Se for isso, basta trocar a imagem destino que será exibida e ela está no a href=”image….” . ex:
abraços
Oi Rafael, obrigado pela resposta, é pessoas como você que faz a diferença! Bem, o que preciso é que a partir de uma imagem abra outra usando o efeito litebox (se posso dizer assim), e na “caixa” que se abrir tenha lá as outras imagens relacionadas a essa! no link: http://notebook.pontofrio.com.br/Notebook-CCE-ILP-432-c-Intel-Dual-Core-T4200-4GB-320GB-LCD-141-HDMI-Wireless-e-Linux-30870.html?Filtro=C56, mostra exatamente o que preciso. Mais uma vez obrigado! e espero que possa me ajudar, já pesquisei na internet muito mas não achei como fazer!
Neto, apesar de ser simples é algo delicado, a única coisa que posso te adiantar é que não passa do mesmo efeito parecido com o lightbox, no entanto no lightbox estamos abindo uma única imagem e neste exemplo está sendo chamado não só uma imagem mas sim uma página html com várias imagens onde cada uma imagem possui o efeito desejado.
O Visual LightBox é quem possibilita que ao invés de chamar uma única imagem seja chamada uma página (iframe) com diversas imagem e juntamente o efeito em cada uma delas.
Nunca utilizei e isso impossibilida que eu possa lhe ajudar de forma mais eficaz, mas dê uma navegada no site do Visual Lightbox, segue o link :
http://visuallightbox.com/photo-gallery-with-lightbox-simple-html-demo.html
forte abraço,
Tem como diminuir a borda superior da foto quando aberta? digo a margem que fica no topo antes de aparecer a foto ( quando a foto é aberta).
Marcio, dê uma olhada no CSS, certamente dá sim. Mas não fui até este nível de detalhes, isso não será abordado. Obrigado pelo comentário
Rafael, eu montei a galeria e como o Bruno disse, eu tambem não consegui ativar a função “prevLink””nextLink” e tambem vi em outros sites, que ao clicar na imagem ela fecha e eu não consegui ver essa função.
Outro detalhe , é como poderia ser feito, para que em vez de colocarmos uma série de thumbs apontando a imagem, apenas colocariamos uma e ela chamaria aleatóriamente as demais?
Se puder me ajudar, agradeço.
E finalizando, quando achava que tudo estava perdido, que teria que morrer na mão de um código pago, descobri sua dica. Agradeço imensamente pela visão profissional que vc tem. Temos de ganhar em cima de nossos clientes e deixarmos de ser ambiciosos e egoista, querendo guardar para si o que se aprende. Se fosse assim, o que seria de nossos professores?
Olá Simoni, obrigado pelo comentário…
Bem, realmente esse é um post infeliz rs rs rs sobre lightbox, prometo que irei atualizar, está muito vago e também porque é bem velho, muitas coisas surgiram desde então,
o que você está querendo fazer é possível sim no lightbox, é até fácil se for algo estático, bastando dar uma olhada no site da lightbox.
O mesmo não é tão diferente para fazer com uma linguagem dinâmica, eu morro de vontade de escrever este post, irei fazer logo, por enquanto dê uma olhada em:
http://smoothgallery.jondesign.net/showcase/gallery/#myGallery-picture(2)
http://visuallightbox.com/
http://flowplayer.org/tools/demos/scrollable/gallery.html
O primeiro link tem mais a ver com que você quer e não é dificil de tornar dinâmico, se for estática é moleza (mas ninguém usa mais estático né).
O segundo link é bem bonito e mais chatinho, é um instalador (windows) você cria uma galeria simples, faz engenharia reversa para tornar dinâmica com PHP por exemplo, mas é possível.
O terceiro link é um plugin jquery e eu tenho utilizado bastante, acho muito produtivo e simples de usar… ah desse último tenho um exemplo dinâmico em :
http://clareslab.com.br/newscg/post.php?pageid=15
Dê uma olhada nos docs destes links e verá que não é tão ruim de fazer (com exceção do visual lightbox 2º link).
abraços e até logo
Rafael, o link CLARESLAB é muito bom, vou tirar o final de semana para estuda-lo. Agora o http://visuallightbox.com, eu já tinha baixado, mas ele cria um espelho de identificação e para retira-lo tem de pagar.
Valeu a dica, e gostei muito do seu site….vou ficar antenada aqui.
Abraços e bom final de semana.
Ah você se refere ao clareslab.com.br? ehehe
preciso atualizar o link “cases” hahaha que vergonha, é que são os primeiros trabalhos e também pq eu só programa, não tenho a mínima vocação para design apesar de ter vontade de aprender hahaha
blz então, abraços
Parabéns pelas dicas!
mas surgiu um pequeno problema enquanto a tamanho da imagem final no lightbox
tem como definir um tamanho fixo pro lightbox??
padronizar sua saida, para que sempre tenha um tamanho 300px x 300px por exemplo, independente do tamanho original da foto
Ranulfo, dê uma olhada na doc http://www.huddletogether.com/projects/lightbox2/ , não sei se tem como fazer sem alterar algo no javascript, particularmente nunca precisei utiliza-lo limitando o tamanho das fotos.
CAra sem comentários estava quebrando a cabeça para fazer o lightbox só tenho a lhe agradecer….
Olá Rafael.
Você sabe se tem como mostrar as miniaturas dentro da visualização do LightBox? Tipo, no rodapé, sei lá…
Eu acho isso bem útil, para o usuário poder ir direto para a foto que interessa, sem ter que passar uma por uma, e sem ter que sair da janela do LightBox para voltar para a tela de miniaturas inicial.
O site http://www.moto.com.br usa esse esquema que estou querendo, mas não sei que tipo de galeria que eles usam.
Abraços!
Edelson eles utilizam o GreyBox (http://orangoo.com/labs/GreyBox/). Você pode tentar adapta-lo, infelizmente só ajudo em relação à instalação, como está comentado no post, para customizações não tenho como ajudar. abraços
Valew Rafael, obrigado pela dica!
Abraços!
Rafael,
E se eu quero que ele vizualize as fotos de uma certza pasta, “setada” pela URL.
Exemplo:
http://www.clares.com.br/index.php?=ehnois
(nem sei se é assim que fica as variaveis na url)
ai na a galeria a ser mostrada no index.php estaria em http://www.clares.com.br/ehnois
sacou?
Obrigado, seu site é perfect
Entendi brow, legal sim é simples de implementar… no arquivo lerDir.php só alterar a linha:
$dir = “fotos”;
por:
$dir = $_GET[‘dir’];
daí a url ficaria assim:
http://fulano.com/index.php?dir=album1
http://fulano.com/index.php?dir=album2
onde album1 e album2 são 2 pastas
Abraços
parabéns pelo post! muito legal!
Olá Rafa, muito bom essa galeria de fotos …
Procurei uma e a que me paraceu bem legal foi essa. Tenho um site no ar sobre karate e existe muitas fotos para serem postadas e este album ficou bem legal.
Porém segui todos os comandos que enviou, mas quando ponho no ar não fica com o efeito que foi mostrado, ou seja: abre outra página com a foto … pode me ajudar ou me dar uma ideia de outra “galeria” que possa abrir as fotos mais rápido ?
Valeu cara, PARABÉNS pelo post.
João, você pode me passar o link do site para eu ver o que há de errado?
Abraços
Ei Rafael neste lightbox aparesce a marca d’agua quando a gente cria a galeria tem como tirar esta marca d’agua ou melhor vc aconselha algum programa semelhante a este ?
Obrigado pela atenção e esta otimo seu site parabens mesmo vc tem ajudado muito as pessoas pelo que leu observei fique com Deus
Fábio, cara me desculpe mas agora fiquei meio perdido rs rs marca dagua? É nesse post mesmo? Rapaz acho que não hein! Dá uma olhada direito para se certificar que não comentou no post errado!
A não ser que esteja falando do visuall ightbox um aplicativo desktop que você seleciona as imagens para criar automaticamente a galeria, se for o caso eu não conheço nenhum grátis para você poder criar.
Ainda, esse post na verdade não está relacionado ao programa e sim ao efeito apenas.
Obrigado pelo comentário e um forte abraço!
muito bom me ajudou bastante
Lightbox é show de bola! sempre uso em meus projetos. Parabens pelo post.
Muito legal mesmo, só tenho uma pergunta. veja bem, eu tenho esse cod:
<a href="cadastro/” rel=”lightbox[roadtrip]”><img src="cadastro/” width=”100″ height=”100″ border=”0″>
ou seja, pego o link da img do banco e exibo ela com o link, mais como tem mais de 1 user cadastra do ele mostra Foto 1 de 80, não teria como exibir só a imagem clicada?
Diego é só remover o [roadtrip]
Altere o rel=”lightbox[roadtrip]“ para rel=”lightbox“
abraço
Rafael, ficou perfeito.
Já sou leitor do seu site a algum tempo e eu já usava o seu sistema de criar thumbs mais nunca consegui usar ele dinamicamente. exe;
tenho um sistema de upload de foto e eu preciso pegar o nome da imagem e passar por varivalvel pra essa linha:
imagejpeg($image_p, “fotos_users/$AQUIEURECEBO/”, 80);
imagedestroy($image_p);
Já tentei concatenar mais sem sucesso. pode dar mais essa força?
No mais, parabéns pela proposta do seu site.
Diego, você tem que fazer o seguinte:
– quando efetuar o upload você grava o nome da imagem no banco
ex: image_1.jpg – somente o nome da imagem, sem o caminho…
E então você passa o caminho para o thumb.php na url, ex:
Só isso!
tabela fotos sql
foto_id
foto_url
$query = mysql_query(“select * from fotos”)
while ($rs = mysql_fetch_object($query))
{
echo " <img src="thumb.php?img=fotos_users/$rs->foto_url” / > " ;
}
abraço
Rafael essa parte eu consigo de boa, oque não da é fazer que que a linha abaixo pegue o nome e faça a thumb:
exe:
$japegueionome = “foto_user_id_10”;
imagejpeg($image_p, “fotos_users/$japegueionome/”, 80);
pq isso tem q ser feito dinamicamente qdo o user fizer o upload da foto dele, manja?
Ixi cara mas essa conversa começou a dar voltas.
Se você ler o que eu escrevi anteriormente vai ver que o que você precisa passar para o arquivo thumb é diferente do que você está mostrando aí.
basta ler novamente e atentamente que você irá conseguir… eu tenho N sistemas que utilizam exatamente esse formato.
Veja o código fonte desse link e repare o que está sendo passado ao thumb.php
http://clareslab.com.br/projetos/sinapse/galeria.php?proid=49
Entendi, é que meu proposito é diferente, minha ideia era pegar a mesma imagem que o user fez o upload e acrescentar o thumb ai no banco eu teria:
imagemgrande | imagempequena
imgteste.jpg imgteste_pequena.jpg
e na pasta eu teria as mesmas imagens salvas. por isso a necessidade de pegar o nome da foto por variavel.
Mais eu entendi perfeitamente oque vc quis dizer. vou testar logo que eu terminar o mural
Diego, você não precisa ter nomes diferentes nas imagens.
Você precisa criar a estrutura de diretório como abaixo :
/fotos
/fotos/thumbs/
os nome das imagens são iguais em diretórios separados.
No upload você salva a imagem padrão em /fotos/ e a miniatura em /fotos/thumbs/
Mas se for fazer isso você não precisa do arquivo thumbs.php, concorda que não há utilizade se você for gerar uma miniatura no upload?
Agora, o que você pode fazer é criar 2 arquivos thumbs, um que gere uma miniatura e outro que exiba o tamando original, para ficar melhor você pode
passar os parametros no thumbs.php
$w = “120”;
$h = “100”;
if(isset($_GET[‘w’]))
{
$w = $_GET[‘w’];
}
if(isset($_GET[‘h’]))
{
$h = $_GET[‘h’];
}
include_once(‘thumbnail.inc.php’);
$thumb = new Thumbnail($_GET[‘img’]);
$thumb->resize($w,$h);
$thumb->show();
exit;
Ah, dê uma olhada também nessa Classe:
http://www.verot.net/php_class_upload_samples.htm
de boa, fiz da forma dita anteriormente e deu certo. perfeito manow. quando eu terminar o trabalho eu mostro.
bom é que eu n preciso dispor de mais espaço em hd e no banco tbm.
Fala ae Rafael. na boa?
Passando pra deixar os links:
http://opcaonossa.6te.net/layout.php?id=album (ainda vo editar as tabelas)
http://opcaonossa.6te.net/layout.php?id=mural
Ehehe. agora só to esperando o Registro do Domínio, rs.
Aê garoto, hehehehe parabéns irmão!
show!
ótimoooooooo
E ai rafael. td blz? PArabéns pelo post, já venho alguns dias estudando ele, consegui aprender bastante, pois atráves dele eu busquei vários outros assuntos. Mas estou com uma dúvida (acho que simples. rs), na hora de criar a galeria, as imagens fica em um tamanho original 500×375 no site e ai desestrura todas as outras tabelas, um exemplo de como eu queria que ficasse é esse do Diego Pinheiro. Agradeço desde já, Obrigado.
Lucas, basta definir o tamanho da imagem via html ou css.
html
css
img { width:100px; height:100px; }
Valeu Rafael. Coloquei mais um efeito na tabela e talz. ficou bacana.
No problema do Lucas acredito que seja no thumb.php, ou na FALTA dele, rs
deve estar
$new_width = 500;
$new_height = 375;
pois, se ele chamo a imagem corretamente (thumb.php?img=x.jpg) não teria como ficar em outro tamanho.
OU ele chamou a imagem assim:
e só deu um
rel=”lightbox[roadtrip]
desta forma ele teria a imagem no tamanho original
Quero agradecer pela dica, obrigado Rafael e Diego, deu certo aqui, quando eu hospedar eu posto pra vc´s darem uma olhada. Valeu.
Correndo o risco de ser acusado de plagio eu digo:
“Aê garoto, hehehehe parabéns irmão!
show!”
ehehEHeh
Valeu irmão!
Abraços
Oh eu denovo.. rs
Para aquele efeito, de quando passar o mouse na foto, eu consigo no PHP também? Sei como no flash, mas acho ser inviavel coloca-lo junto do lightbox. Agradeço demais, valeu.
Luc não entendi muito bem, efeito ? onde tem esse efeito? quando for assim sempre post o link, é que eu me perco nos meus posts hehehe
PHP não cria eventos no lado cliente (ao passar mouse, essas coisas). Se você viu algo assim, certamente é Jscript / CSS, já o flash nao aguento olhar pra ele nem pronto.
Rafael. “Acho” que ele se refere ao efeito que eu coloquei junto com a galeria, link:
http://opcaonossa.6te.net/layout.php?id=album&galeria=grupo
Luc, o link do css:
http://opcaonossa.6te.net/css/new.css
Abraços : )
Rafael. “Acho” que ele se refere ao efeito que eu coloquei junto com a galeria, link:
http://opcaonossa.6te.net/layout.php?id=album&galeria=grupo
Luc, o link do css:
http://opcaonossa.6te.net/css/new.css
Abraços : )
Pode crer Diegao, isso ae! Valeu man!
E ai tah blz, Muito obrigado aos dois, consegui ver hoje as respostas, mas valeu demais já vou preparar pra fazer. Como prometido, segue o link do site que fiz, http://www.metaisbrilhantes.com.br ;
Abraços =)
Bom Dia Rafael, parabens pelo post
deu tudo certinho mais como estou usando um iframe a foto abre no iframe…. por ex. tenho a index com um menu linkando para a pagina fotos (onde esta o lightbox) quando clico na foto abre apenas na iframe. Bom tem como eu fazer abrir na index??? Obrigado e parabens mais uma vez.
DAvi, fica ruim de fazer isso aí, você vai precisar pesquisar no google uma forma de configurar a abertura fora do iframe, algo como window.parent ou então o nome de um segundo iframe, infelizmente não tenho nada desse tipo já pronto !
Oi Rafael, excelente ponto de apoio o seu site. Para quem está começando, como eu, é uma excelente fonte de estudo. Os posts são muito bem explicados. Parabéns!
Então, estou fazendo uma galeria de imagens e acontece que no meu servidor local tudo funciona perfeitamente, inclusive a criação de miniaturas. Entretanto, ao colocar no servidor remoto, as miniaturas não aparecem, embora o lightbox funcione perfeitamente.
Já revisei, refiz, tentei mudar algumas coisas, ma não funcionou. As miniaturas não são mostradas quando a galeria está no servidor remoto. Alguma ideia? Obrigado.
Olá Paulo, valeu!
Cara, verifique a versão do PHP e versão da classe thumbnail, leia os comentários dos posts sobre miniaturas, verá que tem 2 versões do thumbnail.
Outra coisa que pode ser, verifique os nomes dos arquivos, no linux (geralmente usado no remoto) nomes com espaços ou acentos são inválidos e não podem ser exibidos!
Abs, boa sorte!
Caro Rafael, primeiramente obrigado pela resposta.
Infelizmente ainda não funcionou. As miniaturas não aparecem quando o script está no servidor remoto, apenas no local.
Os códigos foram digitados corretamente (pelo menos não há apóstrofos e acentos no lugar das aspas), li todos os comentários dos vários posts sobre miniaturas. A versão do Php local é 5.3.10 e remoto é 5.3.8.
A classe thumbnail baixei a que você disponibilizou no post Galeria Lightbox + Upload de fotos + Thumb + Painel Admin, mas também baixei a mais recente em http://phpthumb.gxdlabs.com/. Tentei com as duas.
O html está assim:
<a rel="lightbox['roadtrip']" href="../../imagens/” title=”” ><img src="mini.php?imagem=../../imagens/” />
O mini.php está assim:
resize(75, 75);
$thumb->show();
?>
Não entendo porque não funciona. Será que estou passando por cima de alguma coisa?
Abs. Obrigado
Mas o que seria esse mini.php? Você alterou o nome do arquivo apenas?
Não sei de onde saiu o ../../imagens/
O html está assim:
<a rel="lightbox[roadtrip]" href="../../imagens/” title=”” ><img src="mini.php?imagem=../../imagens/” />
Desculpe, mas percebi que algumas tags html não são exibidas corretamente.
O mini.php:
require_once (‘classes/thumbs/ThumbLib.inc.php’);
$thumb = PhpThumbFactory::create($_GET[‘imagem’]);
$thumb->resize(75,75);
$thumb->show();
exit;
Paulo, se não passar o nome do arquivo não rola mesmo, não sei como que você chegou ao:
img src=”imagem= ../../imagens/”
Precisaria saber o que você alterou,
Rafael, desculpe-me por não ter sido mais claro. O nome do arquivo vem de uma consulta. É uma galeria dinâmica. Fica assim:
o nome do arquivo está sendo passado corretamente, a galeria funciona beleza localmente, mas as miniaturas não são exibidas quando está no servidor remoto. Aparece a formatação, do tamanho setado no mini.php, dá contar quantas imagens; não aparece aquele x vermelho que aparece no local da imagem quando ela não é localizada, aparece a legenda e ao clicar aparece a imagem grande com o efeito lightbox funcionando corretamente, mas o quadro da miniatura não aparece nada.
Paulo, me passa o link remoto, se preferir eu não aprovo o comentário para não aparecer o link!
Caro Rafael, boa tarde.
Segue o link: ****************
Paulo, onde está:
http://www.site.com.br/conteudo/galeria/mini.php?imagem=../../images/adm/conteudo/gente/imagens/thephantomoftheopera.jpg
Altere para:
http://www.site.com.br/conteudo/galeria/mini.php?imagem=http://www.site.com.br/adm/conteudo/gente/imagens/thephantomoftheopera.jpg
Ou seja:
Alterar o ../../images/
para:
http://site.com.br/caminho_pasta_das_images/
exatamente como está no link abaixo irá funcionar:
http://www.site.com.br/conteudo/galeria/mini.php?imagem=http://www.site.com.br/adm/conteudo/gente/imagens/thephantomoftheopera.jpg
Perceba que se copiar esse link e jogar no browser a imagem só não vai aparecer por um outro motivo dessa vez…
O allow_url_fopen está desativado no seu PHP
envie para raiz do site um arquivo chamado php.ini com o conteúdo abaixo:
allow_url_fopen=on
Primeiramente envie o php.ini
e depois tente acessar o link:
http://www.site.com.br/conteudo/galeria/mini.php?imagem=http://www.site.com.br/adm/conteudo/gente/imagens/thephantomoftheopera.jpg
claro que alterando site.com.br pelo seu domínio
É isso aí garoto! Funcionou beleza! Muitíssimo obrigado pela sua ajuda. Pude aprender um pouco mais. Nâo havia me atentado para as mensagens do log de erros. Só agora percebi que já estavam me avisando sobre o allow_url_fopen.
Você deve ter percebido que aquele link é somente pra esse nosso teste, mas vou deixar lá um pouco mais pra você ver o resultado.
Grande abraço e mais uma vez, muito obrigado.
Ola mestre Rafael, usei sua galeria, adaptei ao meu projeto, ficou muito bom…
Mas quero dar uma incrementadinha, como sempre. Preciso colocar o botão compartilhar do facebook logo ao lado da imagem tanto de total, consegui encontrar onde ele monta o link da imagem que ta mostrando, que é no publicMethod.load = function (), la no img.src = href, mas não estou conseguindo fazer com que mande esse link pra quando monta a colorbox com a imagem para o iframe do botão do face, da sempre null, por favor me de uma ajuda, lhe agradeço. Há e obrigado por todas as suas postagens, são muito úteis,
Wallaaaaaa, rsrs, fala aê Vagner!
Cara, não tive tempo de simular seu problema mas você pode fazer o seguinte, adicione à galeria o JQuery e crie um bind para o evento click.
Ex:
$(‘a’).live(‘click’,function(){
var imgUrl = $(this).attr(‘href’);
$(this).attr(‘title’,imgUrl)
$(this).attr(‘rel’,imgUrl)
})
com isso você tem no título e em REL(utilizado no lightbox) da tag A o endereço da imagem.
Pelo que vi você tem boa noção de prog, acho que essa dica será suficiente para você!
Abs e obrigado pelo comentário, qualquer coisa dá um grito aê!
Bah meu amigo, desculpe, mas em Jquery estou apenas conseguindo achar o sentido da coisa agora, não manjo ainda, em php até me garanto. Não sei se eu não lhe entendi direito ou perguntei mal, quero colocar o botão compartilhar embaixo quando abre a lightbox, pra quando o cara abrir ou trocar de foto, recarregue com o link da imagem atual, mas não ta fácil, será que vc poderia me dar uma ajudinha um pouco maior?
Vagner, me desculpe mas como dito no post, para customizações estou sem tempo mesmo.
Mas para uma pessoa que se garante no PHP, isso aí é moleza demais.
A ajuda que eu posso dar é em relação ao código que disponibilizei porque eu já decorei ele,
novas implementações eu precisaria testar aqui, simular, etc… e o tempo não ajuda.
Gostei muito legal
eu gostaria de saber se pode copiar este código e trocar os seu parámetros???
Obrigado
Aparecido, você pode baixar os fontes de alterar como desejar;
Boa sorte!
seguinte, to montando um site onde todo o conteudo carrega via ajax dentro de uma div, qdo chamo a pagina galeria, ela abre normal, mais qdo clico na foto p fazer o efeito, ele me abre uma outra pagina, ele n faz o efeito lihgtbox dentro da div
Thiago, abrindo em DIV eu não tentei fazer. Creio que tenha que mudar algo no JS do lightbox; Melhor dar uma procurada no google.
Ola to com muita dificuldade de inserir essa galeria no meu site, colocando o arquivo prototype.js ele desativa o slaid do topo é so esse arquivo ja testei todos
Tente colocar primeiro os arquivos (js) da galeria e depois do slide!
Tente alterar a ordem em que os arquivos são chamados no HTML;
Olá Rafael devo dizer que seu tópico está muito bom.
Eu baixei o Light Box Pronto. Minha pergunta é a seguinte.
Quando eu abro no meu site a galeria de imagens, aparecem todas fotos.
Mas não sei como criar um menu para selecionar qual galeria vou querer.
Por exemplo: festa de são joão, feira do livro…
Peço sua ajuda,
obrigado.
Gustavo, infelizmente esse post não aborda o assunto. Para isso tem que ir um pouco além com banco de dados.
Existem outras galerias no blog. Dê uma pesquisada, talvez encontre algo que sirva!
abs
Olá Rafael eu consigo criar uma galeria lightbox da seguinte forma em uma miniatura abram 3 fotos grandes ai de outra miniatura abram 5 fotos grandes e de outra uma foto variando assim?? consigo criar assim? sem ter todas as miniaturas?????
Sim, mas acho que você está falando de categorias. Será preciso criar uma galeria com categorias.
Deve ser assim que você quer: http://clareslab.com.br/dream/album.php
Infelizmente, só tiro as dúvidas em relação aos scripts, não consigo (devido a falta de tempo) ajudar em customizações.
De toda forma, durante o processo você pode me fazer perguntas sobre o script que responderei, sempre lembrando de fazer uma busca no google antes de perguntar;
Boa sorte
Parabéns pelo site, tem ajudado muito.
Abraço.
Parabens amigo, otimo site e otimas dicas.
muito obrigado.
Olá,
Já tentei duas galerias de imagens e nenhuma aparece o botão de fechar e loading…
Eu não altero nada nas pastas do lightbox, somente carrego o CSS e JS no HTML.
Tem alguma dica para arrumar esse problema?
O next e prev funciona.
Obrigado.