Si se encuentran un poco agotados de usar siempre los mismos efectos de lightbox en el contenido de sus artículos o en ciertas secciones en particular, jQuery Popeye será una alternativa muy peculiar a tener en cuenta. Si bien jQuery Popeye ha sido inspirada en los tradicionales lightbox, no básicamente pretende obtener los mismos resultados. Tiene características muy particulares, y es realmente muy atractivo. jQuery Popeye podrá ser útil para montar galerías de imágenes en sección realmente reducidas, ampliar contenido de nuestros post añadiendo muchas imágenes sin dañar el diseño de nuestro blog, añadir cantidad de imágenes mediante Cajas de lightbox y no de forma individual, nos permite añadir una pequeña descripción a cada imagen en la parte inferior de nuestra caja utilizando el atributo ALT y variar un poco el efecto, ya que en vez de lightbox se asemejan mas a los pop-up.
Demo - Decarga demo - Articulo Original jQuery.popeye - an inline lightbox alternative
Uso
Para que funcione correctamente necesitaremos descargar las siguientes librerias. jquery.popeye-0.2.1.js (incluida en el pack original), pero además deberemos descargar jquery.easing.1.3.js junto con jquery-1.2.6.js (Incluidas en mi demo). Una vez con los archivos deberemos realizar la llamada correspondiente desde nuestro encabezado. Copiando y pegando el siguiente código dentro de nuestra etiqueta < HEAD >
<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 deberemos añadir las llamadas a las hojas de estilo.
<link rel="stylesheet" type="text/css" href="css/styling.css" media="screen" />
Por utimo: Comenzamos a montar nuestras Cajas con las imagenes
<!-- [COMIENZO 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, testeado por www. xyberneticos.com. Añadir descripción utilizando el atributo (ALT)" /></a></li>
<li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. Añadir descripción utilizando el atributo (ALT)" /></a></li>
<li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. Añadir descripción utilizando el atributo (ALT)" /></a></li>
</ul>
</div>
<!-- [FIN EJEMPLO DEMO 1] end -->
<div style="clear:both;">
<h2>Demo 2 - Popeye (Float:Right)</h2>
<!-- [COMIENZO 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, testeado por www. xyberneticos.com. Añadir descripción utilizando el atributo (ALT)" /></a></li>
<li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. Añadir descripción utilizando el atributo (ALT)" /></a></li>
<li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. Añadir descripción utilizando el atributo (ALT)" /></a></li>
</ul>
</div>
</div> <!-- [FIN EJEMPLO DEMO 2] end -->
Loading ...
icaro
23-11-2008
Permalink
No se ve bien el demo en Firefox 2.0.0.18
Morpheo
23-11-2008
Permalink
Muchas gracias por el tutorial de jQuery Popeye. Te lo pedí por mail ayer y aquí está, muchísimas gracias.
Con tus explicaciones, ahora si que soy capaz de ponerlo en funcionamiento. Me faltaba bajar los otros jQuery que mencionas y no ponía bien el código dentro de Head para inicializar los scripts...
De nuevo muchas gracias por el tutorial y por hacer Xyberneticos.
Alejandro
23-11-2008
Permalink
Hola Nikko... te escribo esto no por el artículo, sino porque te envie un correo (webmaster@diario-geek.com) hará ya un mes por ahí, y aun no has respondido, me gustaria que lo hicieses.
Saludos,
espero tu respuesta !!
jQuery Popeye - Implementa galerías de imágenes con un estilo Lightbox renovado - Desarrollo | Diseño, desarrollo, Internet & tecnología - pixelco.us blog
23-11-2008
Permalink
[...] todas sus funcionalidades. Para consultar los datos sobre cómo implementarlo en español, en XYBernéticos hay una excelente y bien detallada [...]
Matto
23-11-2008
Permalink
Muy bueno, no se visualiza correctamente en Mozilla 3.0.4
Francko
23-11-2008
Permalink
Esta herramienta ya ha sido probada en EI 6 o 7....? que por lo general son un dolor de cabeza.
Hago la pregunta ya que dependo del navegador del cliente que normalmente es IE.