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...
Pues es verdad, en general los hacks de Virtual Gadjo son muy fluidos y rápidos! parece que optimiza muy bien!
ResponderEliminarMe encanta el botoncito customizado, yo también quiero modificarlas así, un objeto metálico para cerrar, con bordes para la foto metálicos, una textura de fondo, o incluso el logo del blog en una esquina. Eso de customizar las lightbox es algo que me tienta muchísimo para que parezca casi una skin de esas personalizadas de un reproductor de video o algo así...también me gusta que no se vea el fondo gris y que se pueda seguir interactuando con la página, un día me pongo a ver si es posible pero a priori parece que sí...
Puede hacerse todo lo que se quiera... Lo que es a mí, el tema de las imágenes me trae a mal traer: para el miserable botoncito de cierre, tardé un siglo en ajustarle el tamaño. Y ahora, que he probado el Menu3D, no veas... tuve los códigos enseguida, pero me ha llevado cosa de dos horas hacer las imágenes.
ResponderEliminarSe me dan fatal... bueh...