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

Publicado dia 27 de novembro de 2008 | Cateogoria: Javascript | Autor: Alyen
| 2.276 leituras.
| 3 comentários

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.

Demo – jQuery.popeye demo (757) – 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.