MooVirtualImageBox

Una lightbox de virtual-gadjo. Bonita, ligera y muy suave en la transición.

. Podéis ver mi prueba en Clásica.


Necesitamos:

.- CSS:

<style type="text/css">

#zoomExUl {

list-style-type: none;

padding: 0;

margin: 10px 0 0 0;

}

#zoomExUl li {

display: inline;

margin: 5px;

}

#virtualImgDiv {

border-color: #fff;

background: #fff url(http://.../redWhiteLoader.gif) center center no-repeat;

}

#virtualImgMask {

background: #000;

}

#virtualImgCloseLink {

background: url(http://.../closebox.png) left top no-repeat;

}

#virtualBoxLegend {

padding: 10px 0 0 0;

text-align: left;

color: #666;

font-size: 11px;

}

</style>



<!--[if lte IE 6]>

<style type="text/css">

#virtualImgCloseLink {

background: url(http://.../Cerrar.gif) left top no-repeat;

}

</style>

<![endif]-->

Y cambiar aquí fondos, bordes y lo que se quiera.

.- SCRIPTS:

<script src=".../mootools1.2.js" type="text/javascript"></script>

<script src=".../mooVirtualImgbox.js" type="text/javascript"></script>



<script type="text/javascript">



window.addEvent('domready', function(){

new mooVirtualImgbox();

});



</script>

.- HTML:

<ul id="zoomExUl">

<li><a href="img/Laqueviene.jpg" title="LaQue Viene" rel="virtualImgbox"><img src="img/Laqueviene.jpg" alt="" /></a></li>



<li><a href="img/Lips.jpg" title="Lips" rel="virtualImgbox"><img src="img/Lips.jpg" alt="" /></a></li>

<li><a href="img/Esfera.jpg" title="Esfera" rel="virtualImgbox"><img src="img/Esfera.jpg" alt="esfera" /></a></li>

</ul>

Podéis añadir imágenes de siguiente y previa... cada quién a su gusto...