Comentarios con LightWindow

Este es un truco que me encontre hace mucho tiempo en La Blogueria, inventado por Lacrax. Se trata de mostrar los comentarios de una forma más llamativa y elegante con una ventanita emergente muy cuca y fácil de instalar.

LightWindow es una ventana modal con la que podemos presentar cualquier archivo multimedia: imágenes, videos, flash, etc. Para conocer potenciales usos y saber cómo hacer diferentes configuraciones, visita la entrada de Vagabundia sobre LightWindow; además de explicarlo clara y detalladamente, ha tenido la amabilidad de presentarnos los archivos con las imágenes que incluyen ya alojadas en Imageshack y listos para su uso.

Antes de poner manos a la obra, les adelanto que para que funcione la instalación (al menos a mi me salió así), primero debes cambiar el formulario de comentarios a la pantalla completa, ya que uno de los códigos que hay que cambiar no aparecen con la entrada incrustada o la ventana emergente. Luego lo puedes cambiar al que desees.

Pasos a seguir para instalar LightWindow en los comentarios del blog:

1- Gracias a los datos que nos brinda JMiur y La Blogueria, sobre ponerlo en imágenes y videos, sacamos estos ficheros . Solo debes descargarlos y subirlos a tu alojamiento, e incluirlos en estas lineas, como siempre, antes de </head>:

<script type="text/javascript" src="URL_prototype.js"></script>
<script type="text/javascript" src="URL_scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="URL_lightwindow.js"></script>
<link rel="stylesheet" href="URL_lightwindow.css" type="text/css" media="screen" />

La carpeta que nos descargamos incluye las imágenes. Debemos obviarlas y solo subir los ficheros pedidos en las lineas anteriores...

2- Expandimos nuestra plantilla de artilugios y localizamos estos códigos (Recomiendo buscarlos con Ctrl + f):

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

Sustituye las lineas resaltadas por estas:

<a class='lightwindow' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' params='lightwindow_width=500, lightwindow_height=500,lightwindow_loading_animation=false'>

Con estos sencillos pasos, hemos conseguido darle un toque rotundamente diferente a nuestro formulario de comentarios...

Opcional:

• Si deseas cambiar el ancho y alto de la ventana, solo debes modificar los valores del último código que implementamos:

<a class='lightwindow' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' params='lightwindow_width=500, lightwindow_height=500,lightwindow_loading_animation=false'>

• Andaba buscando pornerle un imagen de fondo, al que puse en el blog. Así que solo modifique el:

#lightwindow_contents {
overflow: hidden;
z-index: 0;
position: relative;
border: 10px solid #ffffff;
background: #ddd; ► Color de fondo. Puede ser imagen.
}

Para agregar la imagen de fondo, sustituye background: #ddd; por background: url() right 100% no-repeat;.

Nota: Al tener el otro formulario implementado en los comentarios, si estás en la página individual verás el otro; para ver el efecto LightWindow, debes ir a Inicio, y busca el link de comentarios en cualquiera de las entradas.

Agredesco a:

La Blogueria; por brindarme toda su ayuda y dedicar su tiempo en explicarnos detalladamente en su entrada...