A la espera de que el autor arregle los archivos de descarga (no funciona el enlace... al menos el que yo he probado), vamos a ver los códigos, como yo los he insertado:
.- CSS: Como siempre, aquí dentro se puede cambiar lo que se quiera: bordes, colores, fondos, texto, overlay...
/* MILKBOX */
#mbOverlay {
position: absolute;
left: 0;
width:100%;
background-color: #000; /* 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: #ccc;/* set the Milkbox background color */
border: 10px solid #900;/* set the Milkbox border */
margin:0; padding:7px;
}
.mbLoading{ background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbKRo_Ys2-xqfX5ga8BQKfqq_2ZFPWNYGxvIO-eHatFCLy1Ee2JGtBfwyN2uzdkZ4NhOASu6-G2BGUrHZJ2gPdDCLU_rDx7N7apwb7QvI9DaTsqzHitMgEYTcjVHLKUlO72fyk6xiVrSU/s200/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:#222;
line-height: 1.4em;
text-align: left;
padding-top:8px;
margin:0;
}
/* navigation */
/* be careful if you change buttons dimensions */
#mbNavigation{
background-color:transparent;
float:right;
width:27px;
padding-top:3px;
border-left:1px solid #900;/* 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: #900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEharcFp9WT7QkkktOf4yuu603637HD6WArpetctL487Nv8zTjosLfic1silLm1YKi0E6f75rjXCl07Jyxzkb4ZSr-f1yMPPP5kVcaw-dZpRcOWTemTfaEcL4IY4hUqoKyv6y_LZUc2Yk2zb/s200/prevMilk.gif) no-repeat; }/* IMAGE: prev */
#mbNextLink{ background: #900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsDr4ADgMPxIk2HImS9cm77kg6bwjk6slXWER0v4IOIkoY3_rqybIEhebZyHBIwPkKL0-S4vtu79m92Kx8KyMVFUGaO7bGZ0RswpWjIo8CTQh99UV-IDUsnV93P4JYKZmoAkWh-3GNGhJ6/s200/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: #900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh11x7O73HD2dGelZbDeMKOottEfp6NqEnE0asEmrTxJs66ZSHxoNryiHozAL3kGwvQNBlI3d3tNIac2NRx4X_bcPTYjQyUG_Xu2Mw1zI1zKnRn99EDsMIZrvqHZcIsSwzSyNt9wjOSTfu/s200/closeMilk.gif) no-repeat;/* IMAGE: close */
}
/* description */
#mbDescription{
margin-right:27px;
padding:0px 10px 0 0;
font-weight: normal;
text-align:justify;
}
.- SCRIPTS:
<script src='http://junioscripts.googlepages.com/mootools-beta-1.2b2.js' type='text/javascript'/>
<script src='http://junioscripts.googlepages.com/3milkbox.js' type='text/javascript'/>
Ya sabéis: abridlos y subidlos a vuestro propio "host".
.- HTML: Para una única imagen
<a href="http://.../Venecia.jpg" rel="milkbox" title="Vintage Venezia"><img src="http://.../Venecia.jpg" alt="Vintage Venezia" width="100" height="100" /></a>
La "clave", como en todas las lightbox, está en el "rel".
.- Para una galería o conjunto de imágenes: Solo hay que añadir al "rel" alguna palabra que las una e identifique, por ejemplo
<a href="http://.../Venecia.jpg" rel="milkbox[gall1]" title="Vintage Venezia"><img src="http://.../Venecia.jpg" alt="Vintage Venezia" width="100" height="100" /></a><a href="http://.../Palombina5-Effect.jpg" rel="milkbox[gall1]" title="Efectos en Palombina"><img src="http://.../Palombina5-Effect.jpg" alt="" width="100" height="100" /></a>
... etc...
Una cosa: no se ven los textos del "title" en los blogs que tienen "sweettitles". Yo he quitado, provisionalmente, éstos, para que se pueda ver en la caja de texto de cada imagen cómo queda la descripción.
Pd: El autor está perfeccionando el script, con el objeto de insertar una barra de navegación y potenciar un "fade" del "overlay" (en transición de apertura de la lightbox y de cierre). Así que, casi que espero un poco para explicar la Milkbox básica.
✍ ¿Quieres hacer algún comentario? ✍