Brainiac: ya tienes la Multibox...

... de Phatfusion.
Me ha llevado un buen rato, tras contestar a tu correo, el instalarla, porque hacen falta pluggins que no tengo, como el Quicktime... que he instalado (pero de otros... he pasado olímpicamente, jajjajaaa).
Para quien no sepa de qué se habla, la multibox es un "objeto" que abre en ventanas, todas ligadas, si se quiere, imágenes jpg, vídeos, música, HTML... prácticamente cualquier cosa: de manera que en una misma ventana podéis pasar y ver un montón de objetos diferentes.

El resultado está en MI BLOG DE PRUEBAS: sólo tenéis que abrir la primera ventana y picar en la flecha de la derecha en ésta para seguir abriendo todas las ventanas (o abrirlas una por una. como se prefiera).

Lo dicho: las imágenes jpg se ven estupendamente y algún vídeo al que le he colocado el quicktime (el flash ya lo tengo de antes). En cuanto al mp3... como que me falta un pluggin que no voy a bajar (quien quiera... puede hacerlo... yo ya tengo muy poquito espacio en este pc)... y creo que nada más...
Salvo decir cómo lo he hecho... que no ha sido fácil, para variar.

.- Primero un CSS para la Multibox, al que le he añadido las imágenes (chiflando por el camino, claro):

/**************************************************************

MultiBox
v1.0

**************************************************************/

.MultiBoxContainer {
position: absolute;
border: 20px solid #000;
background-color: #FFF;
display: none;
z-index: 2;
}

.MultiBoxLoading {
background: url(images/loading.gif) no-repeat center;
}

.MultiBoxContent {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.MultiBoxClose {
position: absolute;
top: -26px;
right: -26px;
background: url(http://www.phatfusion.net/multibox/images/close.png) no-repeat;
width: 24px;
height: 24px;
cursor: pointer;
}


.MultiBoxControlsContainer {
overflow: hidden;
height: 0px;
position: relative;
}

.MultiBoxControls {
width: 100%;
height: auto;
position: relative;
background-color: #000000;
}


.MultiBoxPrevious {
position: absolute;
background: url(http://www.phatfusion.net/multibox/images/left.png) no-repeat;
width: 24px;
height: 24px;
left: 0px;
margin-top: 5px;
cursor: pointer;
}

.MultiBoxNext {
position: absolute;
background: url(http://www.phatfusion.net/multibox/images/right.png) no-repeat;
width: 24px;
height: 24px;
right: 0px;
margin-top: 5px;
cursor: pointer;
}

.MultiBoxNextDisabled {
cursor: default;
background: url(http://www.phatfusion.net/multibox/images/rightDisabled.png) no-repeat;
}

.MultiBoxPreviousDisabled {
cursor: default;
background: url(http://www.phatfusion.net/multibox/images/leftDisabled.png) no-repeat;
}

.MultiBoxTitle {
position: relative;
margin: 10px 0 0 35px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
font-weight: bold;
text-align: left;
}

.MultiBoxNumber {
position: relative;
width: 50px;
margin: 10px 35px 0 0;
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
text-align: right;
}

.MultiBoxDescription {
clear: left;
position: relative;
margin: 0 35px 0 35px;
padding-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
text-align: left;
}



/*************************************************************/

<style type="text/css">



#htmlElement {

padding: 10px;

background-color: #000;

}



</style>

.- Ahora los scripts, que en el caso de Phatfusion, son los siquientes (salvo "mi" Mootools"... que no voy a ninguna parte sin él, je):

<script src='http://junioscripts.googlepages.com/mootools-release-1.11.js' type='text/javascript'/>

<script src='http://www.phatfusion.net/utils/overlay.js' type='text/javascript'/>



<script src='http://www.phatfusion.net/utils/swfobject.js' type='text/javascript'/>

<script src='http://www.phatfusion.net/multibox/multibox.js' type='text/javascript'/>

Si no queréis la Multibox más que para imágenes, huelga decir que no necesitáis para nada el swfobject..
.
.- Y el HTML, que llamará a todos los scripts. El ejemplo de Phatfusion es lo suficientemente amplio como para que veáis las funcionalidades... yo sólo he cambiado el referido a imágenes:

<div id='example'>

<a class='mb' href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLkTIppyeqUXLp9V86cs4-XqDnTCHTxDUL6JldswbTjgBEhvCThtxaGhuvgQ0DDLj1ec2cGxgMSm9ukUrs07s-RtbShTAt4CL1SjgpPOebzKoEXPwiWGBf0pyQMjAaIHf1q7ppknFkm_XO/s1600/Oto%C3%B1o.jpg' id='mb1' title='Paisaje 1 (jpg)'><img alt='Paisaje 1' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLkTIppyeqUXLp9V86cs4-XqDnTCHTxDUL6JldswbTjgBEhvCThtxaGhuvgQ0DDLj1ec2cGxgMSm9ukUrs07s-RtbShTAt4CL1SjgpPOebzKoEXPwiWGBf0pyQMjAaIHf1q7ppknFkm_XO/s200/Oto%C3%B1o.jpg'/></a>

<div class='multiBoxDesc mb1' style='display: none;'>Creo que es un paisaje de Otoño....</div>

<a class='mb' href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjalizDopmY-u2IPnusYCZDmXH99EOxh-3e_bPDlscbAmRAdTje8t9Y_RJ7EB3H9va77QAxlnFZcxBMzytcNVnZTLOe0Xg2QrQXxg_e66uJEdj87vThTJhR6j27HaIlY6zvCpBpHADCFk2M/s1600/header_image_04.jpg' id='mb2' title='Paisaje 2 (jpg)'><img alt='Paisaje 2' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjalizDopmY-u2IPnusYCZDmXH99EOxh-3e_bPDlscbAmRAdTje8t9Y_RJ7EB3H9va77QAxlnFZcxBMzytcNVnZTLOe0Xg2QrQXxg_e66uJEdj87vThTJhR6j27HaIlY6zvCpBpHADCFk2M/s200/header_image_04.jpg'/></a>

<div class='multiBoxDesc mb2' style='display: none;'>Todas las descripciones de las imágenes soportan HTML.</div>

<a class='mb' href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdgT1jRDye2ltkdkPELmjdr0G9pZKcXzpIa9O_tWU4jgdaqkwK4S8Xej_bjyNI8mVfLf2zNZfvIHP5RLCFrMo51AbuG32R-IWoYfpNH_LEAjveHIyZnSrfuxeNqTyuM_-AeQdlmW-MFbGI/s1600/1130095651Paisajes1.jpg' id='mb3' title='Paisaje 3 (jpg)'><img alt='Paisaje 3' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdgT1jRDye2ltkdkPELmjdr0G9pZKcXzpIa9O_tWU4jgdaqkwK4S8Xej_bjyNI8mVfLf2zNZfvIHP5RLCFrMo51AbuG32R-IWoYfpNH_LEAjveHIyZnSrfuxeNqTyuM_-AeQdlmW-MFbGI/s200/1130095651Paisajes1.jpg'/></a>

<div class='multiBoxDesc mb3' style='display: none;'>Más bien sombrío...</div><br/>



<a class='mb' href='http://www.phatfusion.net/multibox/files/dragonquest.flv' id='mb4' rel='width:400,height:300' title='Movie'>flv example</a>

<div class='multiBoxDesc mb4'>flv example</div><br/>

<a class='mb' href='http://www.phatfusion.net/multibox/files/dragonquest.mov' id='mb5' rel='width:400,height:310' title='Movie'>mov example</a>

<div class='multiBoxDesc mb5'>mov example</div><br/>



<a class='mb' href='http://www.phatfusion.net/multibox/files/dragonquest.wmv' id='mb6' rel='width:400,height:350' title='Movie'>wmv example</a>

<div class='multiBoxDesc mb6'>wmv example</div><br/>





<a class='mb' href='http://www.phatfusion.net/multibox/files/dragonquest.rm' id='mb7' rel='width:400,height:300' title='Movie'>real example</a>

<div class='multiBoxDesc mb7'>real example</div><br/>



<a class='mb' href='http://www.phatfusion.net/multibox/files/music.mp3' id='mb8' rel='' title='Music'>mp3 example</a>

<div class='multiBoxDesc mb8'>mp3 example</div><br/>



<a class='mb' href='http://www.phatfusion.net/multibox/blank.htm' id='mb9' rel='width:400,height:300' title='iFrame'>HTML page</a>

<div class='multiBoxDesc mb9'>html</div><br/>





<a class='mb' href='blank-ajax.htm' id='mb10' rel='width:400,height:300,ajax:true' title='AJAX'>HTML page (Ajax)</a>

<div class='multiBoxDesc mb10'>html (ajax)</div><br/>



<a class='mb' href='http://www.phatfusion.net/multibox/#htmlElement' id='mb11' rel='' title='HTML element'>HTML</a>

<div class='multiBoxDesc mb11'>html element</div><br/>

<div id='htmlElement'><p>This is a snipet of html.</p><ul><li>list item 1</li><li>list item 2</li></ul></div>









<script type='text/javascript'>

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

new MultiBox(&#39;mb&#39;, {descClassName: &#39;multiBoxDesc&#39;});

});

</script>

</div>

No os olvidéis de añadir el script del final del HTML: en otro caso no funcionará la Multibox.

Ahora parece facilito ¿eh?. Pues no lo era, no, je...