"Popeye"

Aveces creo que lo he visto todo en lightboxes... pero anda que no me queda por ver: Por ejemplo, "Popeye", que es una lightbox-query tan especial que nos permite tener galerías de imágenes en sitios tan estrechos como pueden llegar a ser las entradas de un blog. Y para muestra, echad un ojo a mi
Prueba.

Para conseguirla, sólo tenéis que descargaros la última versión de query (al menos la última con la que trabaja este hack), así como el query_easing y... el query "Popeye".
Un poco de CSS para la lightbox, y listos.
Podéis ver las demos originales y descargaros el query "Popeye" Aqui; y, si tenéis prisa y no tenéis ganas de ir buscando por los mundos query las últimas versiones de los otros dos scripts, esta Páginaos será de gran ayuda (además de disfrutar como enanos con las demos de galerías que propone).

Y vamos al "cómo se hace":

.- CSS: Como siempre, en esto de las lightboxes, necesitamos imágenes para los vínculos de previo, siguiente y demás, amén de diseñar la forma en la que veremos la lightbox. Lo mejor es hacer un link:

<link href='http://.../popeye.css' rel='stylesheet' type='text/css'/>



<link href='http://.../popeye_estilo.css' media='screen' rel='stylesheet' type='text/css'/>

.- SCRIPTS:

<script src='http://.../jquery-1.2.6.js' type='text/javascript'/>

<script src='http://.../jquery.easing.1.3.js' type='text/javascript'/>

<script src='http://.../jquery.popeye-0.2.1.js' type='text/javascript'/>



<script type='text/javascript'>

$(document).ready(function () {

var options1 = {

stageW: &#39;180px&#39;,

stageH: &#39;160px&#39;,

easing: &#39;easeInOutCirc&#39;,

direction: &#39;&#39;,

nlabel: &#39;siguiente&#39;,

plabel: &#39;previo&#39;,

oflabel: &#39;de&#39;,

blabel: &#39;&#39;,

clabel: &#39;cerrar&#39;

}

$(&#39;#popeye1&#39;).popeye(options1);

});

</script>

NOTAS: "stage" es el ancho de la caja Popeye: aquí está puesto a 180, pero cambiadlo como queráis. Igual que el parámetro "stageH", que se refiere al largo de la caja."Easing" es para anotar el plugin que queráis introducir en cuanto a efectos. "Direction" se refiere a la dirección en que se va a deplegar el "thumb" (left o right"). En cuanto a las "label", son las etiquetas de siguiente, previo y demas, a las que podéis poner el texto que se os antoje.

.- HTML:

<div style="clear:both;">



<div id="popeye1" class="popeye">

<ul>

<li><a href="http://..."><img src="http://.../gcheeta1_Lluvia.jpg" alt="Felios bajo la lluvia: lluvia artificial, claro... creada con Gimp" /></a></li>



<li><a href="http://.../Planeta2.jpg"><img src="http://.../Planeta2.jpg" alt="Un planeta sencillito... pero guapo. Con Gimp" /></a></li>

<li><a href="http://.../Bouquet.jpg"><img src="http://.../Bouquet.jpg" alt="Antes de pasar por mí y por el Gimp, era una sola rosa. Ahora es un bouquet de capullos de rosa." /></a></li>

</ul>

</div></div>

Y ya está...