Hace cosa de 1 año, descubrí un framework para realizar cosas al estilo AJAX en mis proyectos con ASP.NET. Este framework permite mostrar espectaculares pop-ups con imágenes y grupos de imágenes. Consiste en cargar una serie de ficheros de Script (JavaScript) y CSS en el código de nuestra página, que te permitirán poder mostrar una ventana por encima de la página contenedora, de forma que todo el contenido quede bloqueado centrándose en la ventana que se ha superpuesto.
Visor de Imágenes y popup de formularios son los casos de uso típicos en los que suelo usarlo.
Permite mostrar espectaculares pop-ups con imágenes y grupos de imágenes.
Las instrucciones para usarlo son las siguientes:
Para abrir una ventana en modo popup con esta librería :
Descargar las librerías de aqui
Crear un HTML con el siguiente código en la cabecera:
<head>
<title>AJAX con LIGHTBOX</title>
<!—aquí se carga la hoja de estilos que propicia el efecto background –>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
<!—Aquí se cargan los 3 Javascripts que son necesarios para ejecutar el framework –>
<script src=”js/prototype.js” type=”text/javascript”></script>
<script src=”js/scriptaculous.js?load=effects” type=”text/javascript”></script>
<script src=”js/lightbox.js” type=”text/javascript”></script>
</head>
Mucho cuidado en este paso al poner las rutas tanto del fichero externo lightbox.css como el de los scripts ya que si nos equivocamos en la ruta, no funcionará ya que no encontrará los scripts a ejecutar (obvio)
En el body de la página creada anteriormente escribimos un enlace a la página que queremos mostrar como popup, con el atributo rel correspondiente
<a href=”default.aspx” rel=”lightbox_text”>Ver página popup</a>
Guardamos el Fichero creado y lo ejecutamos en el navegador.
Este debe ser el resultado Final
No está nada mal el efecto, pero lo bueno de todo esto es que se puede adaptar a nuestras necesidades solo sabiendo un poco de Javascript y cacharreando un poco. Como muestra un botón.
La librería, por defecto, te crea un botón que te cierra la ventana popup, pero si queremos crear otro botón un poco más intuitivo, lo que debemos hacer es solo que en el evento click de ese botón de cerrar, ejecute la instrucción javascript : javascript:myLightbox.end(); return false;
En mi caso, al ser un botón de ASP.NET, se puede realizar de la siguiente manera:
<asp:Button ID=”btnCancelarVotar” OnClientClick=”javascript:myLightbox.end(); return false;” runat=”server” Text=”Cancelar” />
Este es el efecto final :
Solo mencionar un detallito, el orden de carga de los script es totalmente clave, no variarlo!
Por: rafa el Febrero 10, 2009
a las 7:14 pm