jQuery popeye – Caixas lightbox, para ampliar conteúdo sem perder espaço ou montar galerias

jquwrypopeye

Se você esta cansado de usar sempre os mesmos efeitos de lightbox no conteúdo de seus artigos ou em certas seções em particular, jQuery Popeye será uma alternativa peculiar. O jQuery Popeye foi inspirada nos tradicionais lightbox, basicamente não pretende obter os mesmos resultados. Tem características muito particulares, e é realmente muito atraente. jQuery Popeye poderá ser útil para montar galerias de imagens em seção realmente reduzidas, ampliar conteúdo de nossos post adicionando muitas imagens sem danar o desenho de nosso blog ou site, adicionar quantidade de imagens mediante Caixas de lightbox e não de forma individual, permite adicionar uma pequena descrição a cada imagem na parte inferior de nossa caixa utilizando o atributo ALT e variar um pouco o efeito, já que em vez de lightbox se assemelham mas aos pop-up.

DemoDownload – Articulo Original jQuery.popeye – an inline lightbox alternative

Para que funcione corretamente precisaremos baixar as seguintes librerias. jquery.popeye-0.2.1.js (incluida no pack original), ademais deveremos descarregar jquery.easing.1.3.js junto com jquery-1.2.6.js (Incluidas na minha demo). Uma vez com os arquivos deveremos realizar o links correspondente desde nosso arquivo.

Copiando e colando o seguinte código dentro de nossa etiqueta:

<script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.popeye-0.2.1.js"></script>

<script type="text/javascript">
<!--//<![CDATA[

$(document).ready(function () {
var options1 = {
easing:     'easeInOutCirc'
}
var options2 = {
direction:  'right',
duration:   230
}

$('#popeye1').popeye(options1);
$('#popeye2').popeye(options2);
});

//]]>-->
</script>

Tambien deveremos adicionar os links das folhas de estilo.

<link rel="stylesheet" type="text/css" href="css/jquery.popeye.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/styling.css" media="screen" />

Por ultimo: Começamos a montar nossas Caixas com as imagenes

<h2>Demo 1 - Popeye (Float:Left)</h2>
<!-- [EXEMPLO DEMO 1 ] begin -->
<div id="popeye1" class="popeye popeye-hasjs next">
<ul>
<li><a href="images/1large.jpg"><img src="images/1small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
<li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
<li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
</ul>
</div>
<!-- [FIN EXEMPLO DEMO 1] end -->
<div style="clear:both;">
<h2>Demo 2 - Popeye (Float:Right)</h2>
<!-- [EXEMPLO DEMO 2 ] begin -->
<div id="popeye2" class="popeye">
<ul>
<li><a href="images/1large.jpg"><img src="images/1small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
<li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a>
</li><li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
</ul>
</div>
</div>		 <!-- [FIM EXEMPLO DEMO 2] end -->

Qualquer dúvida é so deixar um comentário.

Temas
4 Comments
  • Henrique
    Posted at 20:56h, 08 maio Responder

    Como faz para exibir uma imagem gravada dentro do banco de dados em um campo blob?

  • Dhuankles Castro
    Posted at 20:29h, 06 julho Responder

    Muito bom esse exemplo… bom mesmo parabens!!

  • Rodrigo
    Posted at 18:17h, 23 janeiro Responder

    Gostaria de saber como implementar duas ou mais caixas do jquery popeye no meu site, utilizando a mesma configuração nas duas. Sempre que ponho duas caixas com imagens e passo o mouse em uma a outra também é ativada, fazendo com que as imagens passem nas duas simultaneamente. Porque isso acontece?

Post A Comment