terça-feira, 12 de janeiro de 2010

Lightbox Jquery

Para utilizar o efeito será necessário baixar o arquivo lightbox2.04.zip e descompactá-lo na pasta do seu projeto.

Para mais detalhes acesse o site: http://www.lokeshdhakar.com/projects/lightbox2/

<head>

<title>Lightbox JS v2.0</title>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

</head>

<body>

<!-- link para a imagem grande: -->
<a href="images/image-1.jpg" rel="lightbox">
<img src="images/thumb-1.jpg" width="100" height="40" alt="" />
</a>

<!-- para galerias de imagens use: -->
<a href="images/image-1.jpg" rel="lightbox[a]">
<img src="images/thumb-1.jpg" width="100" height="40" alt="" />
</a>

<a href="images/image-1.jpg" rel="lightbox[a]">
<img src="images/thumb-1.jpg" width="100" height="40" alt="" />
</a>

</body>


Bordar interna img hover usando CSS


<style>
a.linkImagem, a.linkImagem img {
border:none;
float:left;
overflow:hidden;
}

a.linkImagem:hover {
border: 4px solid red;
}

a.linkImagem:hover img {
margin: -4px;
}
</style>

<a href="#" class="linkImagem">
<img src="foto.jpg" alt="Foto" />
</a>