Milkbox (II)

Esta es, digamos, la Milkbox "normal", sin el efecto elástico de la otra que ya expliqué. Esta lightbox tiene la particularidad de ser muy rápida y de presentar un "fade" en la apertura y el cierre, respecto de su propio fondo y el del blog donde se inserta.
Como la que expliqué anteriormente, también tienen imágenes de "siguiente", "anterior" y "cerrar", bajo la imagen, de manera que no hay que volverse loco, tanteando con el ratón, para buscarlos. Si queréis ver todos los efectos que la acompañan, Así como descargarla, podéis ir a la página del autor de la Milkbox
y ver mi Prueba
En mi prueba no veréis texto bajo la imagen, porque no es compatible con la sweetTitle y, en este caso (al contrario que en el blog en el que tengo la Milkbox "elástica") he preferido dejar las tooltips.

A ver la guía de códigos:

.- CSS:

/* MILKBOX */

#mbOverlay {
position: absolute;
left: 0;
width:100%;
background-color: #fff; /* set the Milkbox overlay color // opacity: see the js options */
z-index:100;
cursor: pointer;
}

#mbCenter {
/* for default width and height, see the js options */
position: absolute;
z-index:101;
overflow:hidden;
left: 50%;
top:10%;/* overwritten in the js options to properly position the milkbox when activated in a scrolled window */
background-color: #fff;/* set the Milkbox background color */
border: 7px solid #111;/* set the Milkbox border */
margin:0; padding:5px;
}

.mbLoading{ background: #fff url(http://.../loadingMilk.gif) no-repeat center; }/* IMAGE: loading gif */

#mbImage{ margin:0; padding:0; height:0; border:none; font-size:0; overflow:hidden; }

.clear{ clear:both; height:0; margin:0; padding:0; font-size:0; overflow:hidden; }


/* *** BOTTOM *** */

#mbBottom {
/* set text options */
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
padding-top:8px;
margin:0;
}

/* navigation */
/* be careful if you change buttons dimensions */

#mbNavigation{
float:right;
width:27px;
padding-top:3px;
border-left:1px solid #000;/* set nav border */
}


#mbCount{
width:55px;
overflow:hidden;
padding-top:1px;
float:right;
text-align:right;
font-size:9px; /* count font size */
}

#mbCloseLink, #mbPrevLink, #mbNextLink{
outline:none;
display:block;
float:right;
height:20px;
cursor: pointer;
}


#mbPrevLink, #mbNextLink{ width:17px; }
#mbPrevLink{ background: transparent url(http://.../prevMilk.gif) no-repeat; }/* IMAGE: prev */
#mbNextLink{ background: transparent url(http://.../nextMilk.gif) no-repeat; }/* IMAGE: next */

/* NOTE: doesn't work in ie6, so, just see the js options :) */
a#mbPrevLink:hover,a#mbNextLink:hover,a#mbCloseLink:hover { background-position: 0 -23px; }

#mbCloseLink {
width:20px;
background: transparent url(http://.../closeMilk.gif) no-repeat;/* IMAGE: close */
}

/* description */

#mbDescription{
margin-right:27px;
padding:0px 10px 0 0;
min-height:23px;
font-weight: normal;
text-align:justify;
}

Aquí podéis cambiar el fondo de la milkbox, los bordes, la fuente del texto...

.- SCRIPTS:

<script src='http://.../mootools-beta-1.2b2.js' type='text/javascript'/>

<script src='http://.../milkbox.js' type='text/javascript'/>

.- HTML:

Por ejemplo, para un grupo de imágenes, basta con colocar entre corchetes el nombre que se le va a asignar al grupo (Fotos, Dibujos, Vacaciones, insectos, paisajes... lo que se quiera):
<a href="http://.../31.reyes.magos-m.jpg" rel="milkbox[fiestas]" title="SSMM... los Reyes Magos..."><img src="http://.../31.reyes.magos-m.jpg" alt="" width="100" height="100" /></a>

Si se trata de una imagen que va sola, sin grupo, basta con eliminar los corchetes. Pero en ningún caso os olvidéis de colocar el rel="milkbox", o no funcionará.

Nada más...