Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal preciso da ajuda de vocês,
estou procurando aprender como se criar uma galeria de fotos, um album de fotos.
não é slider nem animação,
poderia fazer com iframe, mais estou a procura de algo mais moderno e novas tecnologia para esse caso
abaixo uma imagem
/applications/core/interface/imageproxy/imageproxy.php?img=http://adersondesigner.com/exemplo.jpg&key=e79f73a7158bb392209be871d10d59d791a3b3e34f01323c0173cec969b7ccee" alt="exemplo.jpg" />
ao clica em uma miniatura abra do lado grande assim por diante,
será que tem algum código php para galeria de fotos, sem precisar usar iframes ?
Agradeço!
oh Marsolim poderia compartilhar o código completo ?
juntamente com o js e css
o código é isso aí mesmo. uma div para a galeria e outra mostrar a imagem ampliada. e dentro da div da galeria as outras divs com as imagens ou pode ser "img src" no lugar das divs da imagem tambem. nesse caso o onclick muda um pouquinho para algo assim
onClick="document.getElementById('img_ampliada').src=this.src;"
Obrigado Marsonlim
Não Funcionou!
O que exatamente não funcionou? Poste seus códigos, veja os erros no console (Firefox + firebug e/ou CTRL + SHIFT + J).
coloque juntamente com as fotos no mesmo diretório e não funcionou
<div id="galeria" style="width: 440px; float: left">
<div id="img1" style="width: 200px; background-image: url('imagens/img1.jpg" onClick="document.getElementById('img_ampliada').style.backgroundImage.url=this.style.backgroundImage.url"></div>
<div id="img2" style="width: 200px; background-image: url('imagens/img2.jpg" onClick="document.getElementById('img_ampliada').style.backgroundImage.url=this.style.backgroundImage.url"></div>
<br>
<div id="img3" style="width: 200px; background-image: url('imagens/img3.jpg" onClick="document.getElementById('img_ampliada').style.backgroundImage.url=this.style.backgroundImage.url"></div>
<div id="img4" style="width: 200px; background-image: url('imagens/img4.jpg" onClick="document.getElementById('img_ampliada').style.backgroundImage.url=this.style.backgroundImage.url"></div>
<br>
<div id="img5" style="width: 200px; background-image: url('imagens/img5.jpg" onClick="document.getElementById('img_ampliada').style.backgroundImage.url=this.style.backgroundImage.url"></div>
<div id="img6" style="width: 200px; background-image: url('imagens/img6.jpg" onClick="document.getElementById('img_ampliada').style.backgroundImage.url=this.style.backgroundImage.url"></div>
<br>
</div>
<div id="img_ampliada" style="width: 600px; float: right"></div>se as imagens estão no mesmo diretorio da página tire a pasta imgens/ do src. deve ficar src="img1.jpg" e observe se tá colocando o nome correto das imagens. e tambem o que passei nos styles são só exemplos talvez tenha que alterar alguma coisa na position para ficar no lugar certo
eu uso js para esses casos. algo assim
o fioat left no primeiro bloco de divs posiciona a galeria a esquerda e o float right da div img_ampliada posicina ele a direita. o onClick de cada div img# joga a imagem dessa div na div img_ampliada.
mais ou menos isso tenta ajustar aí