Virtual Box (Moo.rd)

Moo.rd (un "vástago" de Mootools) ha entrado a diseñar cycles (ya los hemos visto con query) y los incluye en lightboxes y galerías, como las que vamos a explicar aquí (y conste que si Moo.rd sabe de los cycles y se ha puesto manos a la obra, es gracias a Brainiac: quien siga este blog y lea habitualmente los comentarios, lo sabe).

La Virtual Box es una especie de Lightbox, pero no una cualquiera: ésta contiene efectos cycle, como el que podéis ver en la página de la Demo, que me ha servido a mí para probar el hack en este Blog de pruebas.

Para conseguir esta caja-lightbox, así como el efecto de las pruebas (si queréis otro, ya sabéis: acudid a la página de los ejemplos de Moo.rd y escoged, cambiad...) tenemos que hacer lo siguiente:

.- CSS: Es una base para el color de fondo, los títulos, textos, etc... de manera que podéis cambiarlo a vuestro gusto e incluir imágenes, en lugar de texto, para el "previo", "siguiente" y "cerrar".

<style type="text/css">

body {

font-family:Verdana, Arial, Helvetica, sans-serif;

}

#virtualBoxFullPage {

font-size:12px;

}



p#virtualCaptionTitle {

color:#3366CC;

margin:0px;

font-size:16px;

padding-left:4px;

}



p#virtualCaptionContent {

margin:0px;

padding-left:4px;

}



div#thumbs img {

border:2px solid #FF6600;

margin-right:10px;

float:left;

}



div#virtualArrowsBox a {

color:#3366CC;

float:left;

margin-right:10px;

padding:6px 6px 6px 0px;

}



div#virtualArrowsBox a:hover {

color:#FF6600;

}



div#virtualArrowsBox a#virtualCloseButton {

color:#FF6600;

float:right;

padding-right:0px;

margin-right:0px;

}



div#virtualArrowsBoxText {

padding:2px 6px 0px 0px;

color:#CCCCCC;

}

</style>

.- SCRIPTS:

<script src='http://.../moo.rd_1.3.1_mootools_1.2.js' type='text/javascript'/>

<script type='text/javascript'>

window.addEvent(&#39;domready&#39;, function() {

var virtual = new Virtual.Box({

enable: {

arrows: true,

closeButton: true

},

effect: &#39;open&#39;,

leftArrowText: &#39;prev&#39;,

rightArrowText: &#39;next&#39;,

closeButtonText: &#39;close&#39;,

captionOpacity: 0.6

}).setLight(&#39;#000000&#39;);

});

</script>

Podéis descargar el primer script desde la página que os he comentado.

.- HTML: Como siempre, cuidad de no equivocaros a la hora de asignar la ID a la imagen en cuestión. Podéis cambiar el ancho de la virtual Box e incluir en el style lo que se os ocurra. Eliminad, si queréis, los "center" de mi ejemplo, que sólo están para el blog que me lo aloja. Y no os olvidéis de incluir la "class" en cada imagen. Podéis añadir las que queráis, pero teniendo siempre en cuenta que tenéis que cambiar su ID (no vayáis a poner una ID repetida, que ya tenéis en otra imagen: ha de ser única)

<h1>Virtual Box </h1>

<div style='margin: auto; width: 600px;'>

<div id='thumbs'>

<center><a class='virtualbox' href='http://.../Cerrar.gif' id='ok1' title='Cierre :: pero la imagen no cierra la ventana, ¿eh?'>

<img alt='1' height='30' id='img1' src='http://.../Cerrar.gif' width='30'/>

</a></center>



<center><a class='virtualbox' href='http://.../CelorioSepia.jpg' id='ok2' title='Palombina :: En sepia...'>

<img alt='2' height='30' id='img2' src='http://.../CelorioSepia.jpg' width='30'/>



</a></center>





<center><a class='virtualbox' href='http://.../Agua.png' id='ok3' title='El fondo :: ... del mar ...'>

<img alt='3' height='30' id='img3' src='http://.../Agua.png' width='30'/>



</a></center>



<center><a class='virtualbox' href='http://.../Rostro.png' id='ok4' title='Un rostro :: inventado-pero me suena de algo...'>

<img alt='4' height='30' id='img4' src='http://.../Rostro.png' width='30'/>



</a></center>





</div></div>

Y... eso es todo...
--------------------------------------

Pd: En IE7 las leyendas de título, previo, siguiente y cierre se desplazan para la derecha... es decir, que no se ven nada bien...