Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Vi =)

Lightbox sem botao de proximo, anterior e link na imagem ampliada

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não é mais fácil pegar um desses lightbox, e tirar oq você não quer?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Após incluir os arquivos faça.

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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...=/

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 =/

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.