Artigos e Notícias


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

27 de novembro de 2008

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.

Voltar
Categorias:

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

  1. Rodrigo no dia disse:

    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?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Aviso: Todo e qualquer texto publicado na internet através deste sistema não reflete, necessariamente, a opinião deste site ou do(s) seu(s) autor(es). Os comentários publicados através deste sistema são de exclusiva e integral responsabilidade e autoria dos leitores que dele fizerem uso. O autor deste site reserva-se, desde já, o direito de excluir comentários e textos que julgar ofensivos, difamatórios, caluniosos, preconceituosos ou de alguma forma prejudiciais a terceiros. Textos de caráter promocional ou inseridos no sistema sem a devida identificação do seu autor (nome completo e endereço válido de email) também poderão ser excluídos.

© 2016 AlyenStudio - Todos os direitos reservados.