Desde hace tiempo he estado usando una ventana modal en el blog, prettyPhoto, que ahora tendréis que ver en acción en la página oficial, ya que ahora voy a usar una propia.

¿El motivo para cambiarla? Son 25kb de CSS (más todas las imágenes añadidas), más otros 25 de javascript(comprimido). Ahora, he conseguido reducirlo a sólo 8kb (7 de javascript y 1 de CSS con una imagen en base64 incluída).

Si es cierto que no soporta tantas funcionalidades como lightWindow(por ejemplo), soporta vídeos de youtube y vimeo, imágenes y iframes (otras páginas web), además de contenido «inline» (un div oculto que queremos que se muestre en la ventana modal). Por supuesto, también es posible mostrar galerías. Además, he permitido que si se tiene, se pueda usar jQuery para seleccionar elementos y si no, pues que no sea necesario. Otra característica interesante es que es «sensible» (no te muestra la imagen completa si tu pantalla es demasiado pequeña, aunque te da la opción de ampliarla después). Además, es compatible hasta con IE7 (seguramente con IE6 también, pero no he podido comprobarlo)

Cómo instalarla

Para instalarla es necesario poner esto en cualquier parte del fondo de la plantilla (como siempre, mejor encima de </body>):

<script type='text/javascript' src='http://dl.dropbox.com/u/71679931/share/modalBox.min.js'></script>
<script type='text/javascript'>
modalBox.init('a','^modalBox')
</script>
Posteriormente hay que copiar el contenido de este archivo encima de </b:skin> o entre etiquetas <style></style> (nota: la línea con carácteres raros que encontraréis ahí es la imagen que aparece mientras carga, si la queréis cambiar podéis poner otra imagen en base64 o una url a vuestra imagen)

Cómo usarla

Para usarla sólo hace falta poner al link que se quiere abrir y poner rel="modalBox[nombreGalería]", siendo [nombreGalería] opcional.

Ejemplos

Vídeo de Youtube


<a href="http://www.youtube.com/watch?v=LEy8setXrPc" rel="modalBox">Click para verlo</a>
Click para verlo

Vídeo de vimeo


<a href="http://vimeo.com/10149605" rel="modalBox">Click para verlo</a>
Click para verlo

Iframe


<a href="http://css-tricks.com/?iframe=true&width=70%&height=90%" rel="modalBox">Click para verlo</a>
Notad que ?iframe=true es obligatorio. Width y height son parámetros opcionales que pueden especificarse en píxels o en porcentajes con respecto a la ventana. Click para verlo

Inline


<a href="#contenido-oculto-1" rel="modalBox">Click para verlo</a>
<div id='contenido-oculto-1' style="display:none">Hola! Soy el contenido oculto</div>
Click para verlo

Títulos y descripciones

He dado la opción de poner un título mediante el atributo title o data-title y una descripción (caption) mediante el atributo data-caption. El uso sería algo así:

<a href="http://www.youtube.com/watch?v=LEy8setXrPc" data-title="Este es el título" data-caption="Esta es la descripción" rel="modalBox">Click para verlo</a>
Click para verlo

Galerías

Como he mencionado antes, en los links de una galería en vez de rel="modalBox" rel="modalBox[nombreGalería]". El ejemplo lo podéis ver en la entrada de prettyPhoto (recordad cambiar rel="prettyPhoto" por rel="modalBox")

Configuración y modificaciones

La configuración de la ventana es global (la misma para todas), y es la siguiente:<(p>


config: {
 //Queremos que al hacer click en la capa se cierre la ventana
 overlayClick:true,
 //Queremos que se muestre la navegación
 showNavi:true,
 //Ahora mismo es inútil (todavía no implementada), estará en breve. 
 showGalName: true,
 //Ancho para los elementos inline
 inlineWidth:600,
 //Orden de los elementos (1,2,3,4)
 orden:['title','content','caption','navi'],
 //Textos
 textoAnterior: "Anterior",
 textoSiguiente: "Siguiente",
 textoCerrar: "X",
 //Usar otro atributo (data-rel), etc
 atributo: "rel"
}

Por lo tanto, para editarlas, tendríamos que poner antes de modalBox.init (aunque en el mismo script) modalBox.config.nombreOpcion = valor. Por ejemplo:
modalbox.config.textoAnterior = "«"

Truco: Usarla en todas las imágenes de las entradas (con jQuery)

Gracias a que he dado opción a usar jQuery para seleccionar los links, podemos usarlo para todas las imágenes de las entradas. Para ello, sólo haría falta cambiar la línea de código que pone modalBox.init('a','^modalBox') por modalBox.init('.post-body a:has(img)').

Como siempre, si tenéis alguna duda no dudéis en comentar para aclarar vuestras dudas, o cualquier otra cosa.