Fancy Box

Otra lightbox para nuestra colección: en este caso, con Query y efectos de animación, con posibilidades de variar cosas como el overlay o dichos efectos. Podéis ver las demos originales, tanto de imagen individual, como de grupos y las distintas funcionalidades, además de descargar el zip (está en la cabecera de la página) en FancyBox. Si queréis ver mi prueba, la tengo en Este Blog

Pasos:

.- CSS: Si queréis las mismas imágenes, tenéis que subir unas cuantas. A parte, la estructura es ésta:

div#fancy_overlay {
position:absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
background-color: #333;
}

div#fancy_loading {
position: absolute;
height: 40px;
width: 40px;
cursor: pointer;
display: none;
overflow: hidden;
background: transparent;
z-index: 100;
}

div#fancy_loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background: transparent url(fancy_progress.png) no-repeat;
}

div#fancy_close {
position: absolute;
top: -12px;
right: -12px;
height: 30px;
width: 30px;
background: transparent url(fancy_closebox.png) ;
cursor: pointer;
z-index: 100;
display: none;
}

div#fancy_content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
z-index: 96;
}

#fancy_frame {
position: relative;
width: 100%;
height: 100%;
display: none;
}

img#fancy_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
padding: 0;
margin: 0;
z-index: 92;
}

div#fancy_title {
position: absolute;
bottom: -35px;
left: 0;
width: 100%;
z-index: 100;
display: none;
}

div#fancy_title table {
margin: 0 auto;
}

div#fancy_title div {
color: #FFF;
font: bold 12px Arial;
padding-bottom: 2px;
}

td#fancy_title_left {
height: 32px;
width: 15px;
background: transparent url(fancy_title_left.png) repeat-x;
}

td#fancy_title_main {
height: 32px;
background: transparent url(fancy_title_main.png) repeat-x;
}

td#fancy_title_right {
height: 32px;
width: 15px;
background: transparent url(fancy_title_right.png) repeat-x;
}

div#fancy_outer {
position: absolute;
top: 0;
left: 0;
z-index: 90;
padding: 18px 18px 58px 18px;
margin: 0;
overflow: hidden;
background: transparent;
display: none;
}

div#fancy_inner {
position: relative;
width:100%;
height:100%;
border: 1px solid #444;
background: #FFF;
}

a#fancy_left, a#fancy_right {
position: absolute;
bottom: 10px;
height: 100%;
width: 35%;
cursor: pointer;
background-image: url(data:image/gif;base64,AAAA);
z-index: 100;
}

a#fancy_left {
left: 0px;
}

a#fancy_right {
right: 0px;
}

a#fancy_left:hover {
background: transparent url(fancy_left.gif) no-repeat 0% 100%;
}

a#fancy_right:hover {
background: transparent url(fancy_right.gif) no-repeat 100% 100%;
}

#fancy_bigIframe, #fancy_freeIframe {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}

div#fancy_bg {
display: none;
}

div.fancy_bg {
position: absolute;
display: block;
z-index: 70;
}

div.fancy_bg_n {
top: -18px;
width: 100%;
height: 18px;
background: transparent url(fancy_shadow_n.png) repeat-x;
}

div.fancy_bg_ne {
top: -18px;
right: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_ne.png) no-repeat;
}

div.fancy_bg_e {
right: -13px;
height: 100%;
width: 13px;
background: transparent url(fancy_shadow_e.png) repeat-y;
}

div.fancy_bg_se {
bottom: -18px;
right: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_se.png) no-repeat;
}

div.fancy_bg_s {
bottom: -18px;
width: 100%;
height: 18px;
background: transparent url(fancy_shadow_s.png) repeat-x;
}

div.fancy_bg_sw {
bottom: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_sw.png) no-repeat;
}

div.fancy_bg_w {
left: -13px;
height: 100%;
width: 13px;
background: transparent url(fancy_shadow_w.png) repeat-y;
}

div.fancy_bg_nw {
top: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_nw.png) no-repeat;
}

.- SCRIPTS:

/* required */ <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.fancybox.js"></script> /* optional */ <script type="text/javascript" src="js/jquery.pngFix.js"></script> <script type="text/javascript" src="js/jquery.metadata.js"></script>

.- HTML: Como en todas las lightboxes, tenemos que añadir a la imagen un "rel"·lightbox" para que funcione:

<a rel="lightbox" title="Una naranja... de aquélla manera..." href="http://.../NARANJA.png"><img src="http://.../NaranjaMetal.png" alt="Naranja" width="40" height="40"></a><a rel="lightbox" title="Tan sólo un experimento" href="http://.../Tronco2.jpg"><img src="http://.../Tronco2.jpg" alt="Efecto" width="40" height="40"></a><a rel="lightbox" title="El juego de los juegos" href="http://.../ElJuego.jpg"><img src="http://.../ElJuego.jpg" alt="Juego" width="40" height="40"></a>