Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
Estou precisando criar uma página de produtos, que conterá 5 máquinas.
Preciso por uma miniatura que qndo clicada ela se abra maior.
Com os conhecidos lightbox eu sei que isso é possível, mas todo lightbox que encontro há na foto qndo ampliada um botãozinho de próxima foto, um de foto anterior e ainda um link na foto.
Eu nao preciso de nada disso, so q a foto se abra com um simples botao de fechar.
Alguem saberia me ajudar? Desde já mto obrigado
mas eu não sei mexer no código desses lightbox...eu mexo em uma coisa nada funciona...=/
Olha o codigo deste site.. você consegue..
http://www.rjimobiliaria.com.br/detalhes_i...hp?id_imovel=12
rsddaros é algo exatamente com essa funcionalidade q eu preciso...mas so consegui ver o codigo html com os includes disso...mas o lightbox mesmo nao...
faz o download dos arquivos em http://www.lokeshdhakar.com/projects/lightbox2/
depois inclua estes aquivos utilizando as tags
exemplo:
<script src="lytebox.js"></script>
<link media="screen" type="text/css" href="lytebox.css" rel="stylesheet">Para colocar links nas imagens use <a title="" rel="lytebox" href="imagemGrande.jpg"
quando o usuario clicar no link vai abrir a href="imagemGrande.jpg"
repita isso para todas as imagens que você quizer este efeito
<a title="" rel="lytebox" href="Upload/12/gd/da36a61ce99e.jpg">
<img width="98" height="80" border="0" src="imagemPequena.jpg"/>
</a>rsddaros fiz como você falou...na minha pagina html inclui as tags no head:
<script src="lightbox.js"></script>
<link media="screen" type="text/css" href="lightbox.css" rel="stylesheet">e nas imagens q terão o link coloquei:
<a title="Eletrônica Analógica - EA3600" rel="lightbox" href="Eletronica/EA3600.jpg">
<img src="Eletronica/BIT-EA3600.jpg"/>
</a>peguei os arquivos lightbox.css e lightbox.js e joguei na mesma pasta q esta o arquivo html q estou usando.
e a imagem nao abriu com o efeito do lightbox, mas sim numa tela branca...=/
Melhor fazer assim ..
descompactar o "lightbox2.04.zip" para uma pasta "lightbox2.04" por exemplo
ao abri esta pasta vai ter 1 arquivo index.html e 3 pastas "js, css e images"
abra o index.html em seu navegador .. neste indes tem um exemplo. se você clicar na imagem vai fazer exatamente oque você quer..
[b]Part 1 - Setup[/b]
[b] 1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.[/b]
<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>
[b] 2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).[/b]
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />[b]Part 2 - Activate[/b]
[b] 1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:[/b]
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
rsddaros obrigado..eh isso mesmo q preciso...você saberia me dizer se eh possivel eu colocar o titulo da foto e o botao de fechar na parte superior ao inves de embaixo da foto?
mto obrigado
uma vez eu mexi num codigo do javascript de um lightbox e troquei a ordem q montava as divs e ai ela crescia pra cima, aparecendo o bt de fechar e o titulo na parte de cima...mas nao to achando nada agora =/
Não é mais fácil pegar um desses lightbox, e tirar oq você não quer?