Abrir popups estilo Mac
Postado por: Pedro Rogério em
Se você utiliza miniaturas de imagens em seu site, e gostaria que o usuário ao clicar, elas fossem abertas em um tamanho maior, existem várias soluções simples para isso, algumas amigáveis, outras não, mas uma solução que eu acho interessante são os Lightbox. Uma forma de conseguir efeitos desse tipo sem a utilização de frameworks JavaScript é utilizar o Fancyzoom.
Fancyzoom é um pequeno JavaScript que nos permite fazer zoom em imagens, através de um efeito “emergente” ao estilo MAC. Sua utilização é muito simples, basta adicionar 2 linhas de código ao seu site, semelhantes a essa:
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
Após, é só adicionar o seguinte código ao body de sua página:
<body onload="setupZoom()">
Está pronto, o JavaScript agora fará o zoom em suas imagens automaticamente. Basta você colocar um link na imagem para a imagem maior, exemplo:
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
Mas, se por um acaso você deseja que explicitamente alguma imagem não tenha zoom, basta adicionar o seguinte código no link da imagem:
<a href="image.jpg" rel="nozoom"> <img src="image-thumbnail.jpg" /></a>
Não vou negar que adorei a biblioteca, o estilo dela é inovador…
Mas ainda assim, normalmente você quer escolher quais imagens tenham esse efeito e não contrário…
Caso vc queira que a maioria do seu site NÃO tenha esse efeito, você teria que colocar o rel=”nozoom” nela?!?
Acho meio inconveniente, já que a maioria das bibliotecas desse generos fazem o inverso.
Abraços
muito bom… mas… pesadinho ne??
Só gostaria de sabe como colocar o botão “fechar” quando se clica na imagem?