jquwrypopeye.jpg

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 >

PLAIN TEXT
JavaScript:
<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 deberemos añadir las llamadas a las hojas de estilo.

PLAIN TEXT
CSS:
<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 utimo: Comenzamos a montar nuestras Cajas con las imagenes

PLAIN TEXT
HTML:
<h2>Demo 1 - Popeye (Float:Left)</h2>

    <!-- [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&ntilde;adir descripci&oacute;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&ntilde;adir descripci&oacute;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&ntilde;adir descripci&oacute;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&ntilde;adir descripci&oacute;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&ntilde;adir descripci&oacute;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&ntilde;adir descripci&oacute;n utilizando el atributo (ALT)" /></a></li>
               </ul>
        </div>
      </div>         <!-- [FIN EJEMPLO DEMO 2] end -->