Archivos para las entradas con etiqueta: web

Ahora les presento una nueva versión del lightbox, pero ahora como plugin, por cierto si no quieres leer todo el post aquí te pongo un enlace para descargar el Custom LightBox

¿Por qué otro lightbox?

Bueno para empezar si no te quieres esforzar en diseñar un lightbox tienes muchos de donde escoger (FancyBox, ThickBox, SuperBox, ColorBox por ejemplo en jQuery, para otros frameworks también hay e incluso sin frameworks de javascript), pero si quieres hacer algo diferente con el lightbox este desarrollo fue pensado bajo esta característica.

Otra característica añadida es hacer algo más liviano sin tener todas las características de los lightbox (carga de iframes por ejemplo), esto significa que tendrás que trabajar un poco más para hacer lo que necesitas, pero que al final el código es más pequeño (cosa que se recomienda por todos lados).

El XHTML

Esta maqueta que muestro es extremadamente sencilla para mostrar esto, pero ha sido usado con maquetas más elaboradas. La base de esto es tener el contenido general y al final (de preferencia) agregar la maqueta de lo que será el lightbox (una capa que este por encima de todo y sobre de esta la ventana con información), esto se muestra en el código en rojo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prueba de lightbox</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<h1><a id="link" href="#">test</a></h1><!-- enlace que muestrará el lightbox -->

<!-- elementos ocultos -->
<div id="overlay"></div> <!-- capa que ocultará la página -->
<div id="lightbox"> <!-- el lightbox -->
	<a id="closeLightbox" href="#"></a><!-- botón para cerrar el lightbox -->
	<div id="contentLightbox"><img src="css/img/ajax-loader.gif" alt="" /></div> <!-- imagen de precarga -->
</div>
</body>
</html>

CSS

En primer lugar te recomiendo usar un reset para los estilos (yo te recomiendo Reset CSS de meyerweb.com) y después darle estilos al lightbox.

Básicamente el asunto es poner un div por encima de todos los elementos que a continuación les muestro el código y un comentario respecto a los elementos:

/* estilos */
div#overlay { /* este elemento es el que bloqueará los elementos de la página */
	background:#96F;
	display:none;
	position:absolute;
	left:0;
	width:100%;
	top:0;
	z-index:10
}

div#lightbox { /* el div que contiene el otro div que tendrá la información (además de que este tiene el diseño) */
	background:url(img/lbBG.png) no-repeat center;
	display:none;
	height:500px;
	left:50%;
	margin:-300px 0 0 -250px;
	position:absolute;
	top:50%;
	width:600px;
	z-index:20;
}

div#lightbox a#closeLightbox { /* enlace para cerrar el lightbox */
	background:url(img/shut_down.png) no-repeat center;
	display:block;
	height:50px;
	margin:-25px 0 0 0;
	position:absolute;
	right:-50px;
	text-indent:-9999em;
	top:50%;
	width:50px;
}

div#lightbox div#contentLightbox { /* donde estará la información que se mostrará */
	background:#FFF;
	height:268px;
	left:174px;
	position:absolute;
	top:90px;
	width:292px;
}

div#lightbox div#contentLightbox img { /* esta imagen es la imagen de precarga */
	display:none;
	left:50%;
	margin:-16px 0 0 -16px;
	position:absolute;
	top:50%;
}

Ahora vamos a poner esto en la página (bueno, la asociación a este código):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prueba de lightbox</title>

<link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- hoja de estilos con el código anterior -->
</head>

<body>
<h1><a id="link" href="#">test</a></h1><!-- enlace que muestrará el lightbox -->

<!-- elementos ocultos -->
<div id="overlay"></div> <!-- capa que ocultará la página -->
<div id="lightbox"> <!-- el lightbox -->
	<a id="closeLightbox" href="#"></a><!-- botón para cerrar el lightbox -->
	<div id="contentLightbox"><img src="css/img/ajax-loader.gif" alt="" /></div> <!-- imagen de precarga -->
</div>
</body>
</html>

jQuery plugin

Lo de siempre: cargar la librería de jQuery

La idea básica del funcionamiento de javascript en el lightbox es mostrar el div principal que oculta la página, después cargar el div que tiene el lightbox y poder ocultar de nuevo los elementos mostrados. Esto lo vamos a hacer dentro de un plugin de jQuery (que es el mecanismo para agregar funcionalidad a jQuery, en este caso la nuestra).

La idea básica esta, ahora empecemos con el plugin para jQuery. Para empezar me he basado (aprendido) de estos artículos: jQuery plugins authoring, Building your first jQuery Plugin y Learn how to create a jQuery Plugin, de donde el primer paso es poner la estructura de los plugins:

(function($) {
$.fn.CustomLightBox = function() {
	return this.each(function() {
		//nuestro código
	});
};
})(jQuery);

El código anterior muestra la estructura básica de cualquier plugin de jQuery (también evita el problema con el uso de otras librerías). El código en rojo es el nombre del plugin (que llamaremos como jQuery(selector).CustomLightBox()) y el código en rosa/fiucsa es donde pondremos toda la funcionalidad.

Ahora asignemos al plugin una funcionalidad (jeje, el hola mundo) con esto:

(function($) {
$.fn.CustomLightBox = function() {
	return this.each(function() {
		alert('hola mundo');
	});
};
})(jQuery);

Con esto al usar el lightbox en un elemento aparecerá la fabulosa ventana de alerta del navegador. Ahora asociemos un evento al plugin, y solo necesitas el selector (en este caso el mismo) y programar el click (como lo harías en un script normal de jQuery).

Para esto solo asociaremos el click con un alert:

(function($) {
$.fn.CustomLightBox = function() {
	return this.each(function() {
		jQuery(this).click(function() {
			alert('evento enviado por el enlace asociado al plugin');
		});
	});
};
})(jQuery);

Ahora a meter nuestro desarrollo en el plugin (con comentarios):

/**
 * CustomLightBox
 */
(function($){
	var _this = null; // referencia al elemento que se le asocio el plugin
	var settings = null; // configuración

    $.fn.CustomLightBox = function(params) {
		_this = jQuery(this);
		settings = $.extend({
			// elementos
			overLayer: null,// layer que oculta todos los elementos - jQuery element
			mainLayer: null, // layer que muestra la info del lightbox - jQuery element
			closeButton: null, // botón que cierra el lightbox - jQuery element
			// animación
			overLayerOpacity: null, // opacidad del layer que oculta todos los elementos - entero
			showAnimate: null, // tipo de animación - cadena
			// métodos
			onShowFn: null, // llamada después de la muestra del lightbox - función
			onCloseFn: null // llamada después del cierre del lightbox - función
		},params);

        return this.each(function() {
			/**
			 * lanzador del lightbox
			 */
			_this.click(function() {
				switch(settings.showAnimate) {
					case 'fadeIn': fadeIn(settings.onShowFn);break;
					case 'overLayerLeft2Right': overLayerLeft2Right(settings.onShowFn);break;
					default: fadeIn(settings.onShowFn);
				}
			});

			/**
			 * Cerrar el lightbox cuando se da click en el overlayer
			 */
			settings.overLayer.click(function() {
				closeLightBox(settings.onCloseFn);
			});

			/**
			 * Cerrar el lightbox cuando se da click en el boton de cerrar
			 */
			settings.closeButton.click(function() {
				closeLightBox(settings.onCloseFn);
			});
        });
    };

	// funciones >
	/**
	 * Verificar si se han cumplido los requisitos mínimos para poder operar
	 */
	var isReady = function() {
		if(settings.overLayer && settings.mainLayer && settings.closeButton)
			return true;
		else
			return false;
	};

	/**
	 * Verificar si callback es una función y ejecutarla
	 */
	var runFunction = function(callFn) {
		if (typeof callFn == "function")
			callFn();
	};

	/**
	 * Cerrar el LightBox
	 */
	var closeLightBox = function(func) {
		if(isReady()) {
			// ocultar overlayer
			settings.mainLayer.fadeOut(function() {
				settings.overLayer.fadeOut();
			});
		}
		return false;
	};

	/**
	 * Animación que muestra poco a poco el overlayer completo
	 */
	var fadeIn = function(func) {
		if(isReady()) {
			// mostrar overlayer
			settings.overLayer.css({
				'display': 'block',
				'height': jQuery(window).height(),
				'opacity': settings.overLayerOpacity
			}).fadeIn(function() {
				settings.mainLayer.fadeIn();
			});
		}
		return false;
	};

	/**
	 * Animación que recorre el overlayer de izquierda a derecha
	 */
	var overLayerLeft2Right = function(func) {
		if(isReady()) {
			// mostrar overlayer
			settings.overLayer.css({
				'display': 'block',
				'height': jQuery(window).height(),
				'opacity': settings.overLayerOpacity,
				'width': 0
			}).animate({'width':'100%'},500,function() {
				settings.mainLayer.fadeIn(function() {
					runFunction(func);
				});
			});
		}
		return false;
	};
})(jQuery);

Bueno ya pusimos todo lo que va a hacer el plugin, pero ¿cómo lo asociamos a la página? Jejeje, aquí esta el código (el comentario CDATA y el cierre de este son para poder tener el código javascript y que valide con la W3C):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Custom LightBox</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function() {
	var lbContent = jQuery('div#contentLightbox');
	jQuery('a#link').CustomLightBox({
	overLayer: jQuery('div#overlay'),// jQuery element
	mainLayer: jQuery('div#lightbox'), // jQuery element
	closeButton: jQuery('a#closeLightbox'), // jQuery element
	subLayers: null, // array jQuery element
	// animación
	overLayerOpacity: 0.5,
	showAnimate: 'overLayerLeft2Right', // text
	// métodos
	onShowFn: function() {
		jQuery.ajax({
			url: 'ajaxTest.php', // cargamos contenido con AJAX
			type: 'POST',
			dataType: 'html',
			error: function(request,sts,error) {
			alert(error);
 		},
 		beforeSend: function() {
 			lbContent.children('img').fadeIn();
 		},
 		success: function(data, sts) {
 			lbContent.children('img').fadeOut(function() {
				lbContent.append(data);
			});
		}
	});
	}, // function
	onCloseFn: null // function
	});
});
// ]]>
</script>
</head>

<body>
<h1><a id="link" href="#">test</a></h1>

<!-- elementos ocultos -->
<div id="overlay"></div>
<div id="lightbox">
	<a id="closeLightbox" href="#"></a>
	<div id="contentLightbox"><img src="css/img/ajax-loader.gif" alt="" /></div>
</div>
</body>
</html>

El PHP (solo para la prueba)

El PHP para la llamada AJAX es este:

<?php
	sleep(3); // sólo para que se vea el efecto ajax
?>
<h2>Carga con AJAX</h2>
<p>archivo de prueba con carga dinámica</p>

TODO

Bueno, a este plugin le falta (desde mi punto de vista):

  • Poner valores por default en la configuración (en este momento solo les pongo null).
  • Poder generarlo de manera automática con x o y característica (al estilo de jQuery YUI).
  • Desarrollar más transiciones a la hora de mostrar el lightbox.
  • Añadir transiciones como funciones a la manera de jQuery Validate (para nuevos tipos de datos).

Licencia

Puedes descargar el Custom LightBox, bajo la licencia Creative Commons (o sea que solo dame un poco de crédito y puedes hacer lo que quieras) y tampoco hay garantía alguna (así le hacen todos los que hacen Open Source).

Anuncios

Resulta que hay muchas lightbox (de jQuery o Mootools o el framework javascript que se les ocurra), pero el problema de estos es que estos no permiten una fácil modificación (diseño) de la caja.

Este problema se me presento en el trabajo y pues a hacer un lightbox desde cero. De hecho no es difícil ya que solo se necesita hacer esto:

  1. Ocultar (o sobre poner algo en) el contenido de la página
  2. Mostrar la caja (con el diseño personalizado)
  3. Cerrar la caja y volver a mostrar el contenido

¿Fácil? Yo digo que sí, el problema de los plugins en los frameworks es que vienen mucho más poderosos que esta solución. El desarrollo anterior lo vamos a hacer sobre jQuery (porque con ese trabajo).

(X)HTML (en rojo la estructura del lightbox)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test LightBox</title>
</head>

<body>
<div id="info">informacion
    <ul>
    <li><a href="#" id="startBL">abrir</a></li>
    </ul>
</div>

<div id="lbOverLay"></div>
<div id="wpLb">
    <a id="wpLbClose" href="#">cerrar</a>
    <div id="wpLbHd">informaciom</div>
</div>
</body>
</html>

CSS (del lightbox)

div#lbOverLay {
	background: #99CCFF;
	display: none;
	height: 700px;
	opacity: 0.6;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 3000;
}
/* No muestra la transparencia en IE6 */
* html div#lbOverLay {
	filter: alpha(opacity = 50);
}
div#wpLb {
	background: url(lb_bg.png) no-repeat center center;
	display: block;
	height: 550px;
	left: 50%;
	margin: 0 0 0 -225px;
	position: absolute;
	top: -550px;
	width: 450px;
	z-index: 3001;
}
div#wpLb a#wpLbClose {
	background: url(lb_close.png) no-repeat center center;
	height: 40px;
	position: absolute;
	right: 70px;
	text-indent: -999em;
	top: 65px;
	width: 40px;
}
div#wpLb div#wpLbHd {
	left: 50%;
	margin: 0 0 0 -160px;
	position: absolute;
	top: 140px;
}

jQuery

Primero algunas definiciones de variables:

//div que se va a sobreponer sobre el contenido
var wpLbOver = jQuery('div#lbOverLay');
//div que contendrá la información (diseño)
var wpLb = jQuery('div#wpLb');
//enlace para cerrar el lightbox
var lbClose = jQuery('a#wpLbClose');
//div que posiciona la información
var wpLBCt = jQuery('div#wpLbHd');

//enlace para abrir el lightbox
var lbOpen = jQuery('a#startBL');

//variable que maneja la posición donde aparecerá el lightbox (vertical)
var topStart = 0;

Ahora vamos a poner la funcionalidad, ocultar y mostrar el lightbox (1 y 2)

//abrir el lightbox
lbOpen.click(function() {
    //sobre poner una capa
    wpLbOver.css({
        'width': jQuery(window).width(),
        'height': jQuery(document).height(),
        'left': -(($(window).width() - $('body').width()) / 2)
    }).fadeIn(function() {
        //iniciar la posición de la caja
        wpLb.css({
            'display': 'block',
            'top': topStart - wpLb.height()
        });
        //animar su entrada
        wpLb.animate({'top': topStart - 20},500,function() {
            wpLb.animate({'top': topStart - 50},250,function() {
                wpLb.animate({'top': topStart - 20},250);
                //cargar contenido
                wpLBCt.load(lbOpen.attr('href'));
            });
        });
    });
});

Cerrar la ventana (3):

//cerrar el lightbox
lbClose.click(function() {
    //desaparecer el box
    wpLb.animate({'top': topStart - wpLb.height()},500,function() {
        wpLbOver.fadeOut();
        //ocultar la capa sobre puesta
        wpLb.css({'display': 'none','top': - wpLb.height()});
    });
    return false;
});

¿Y dónde lo puedo ver?

Por desgracia no tengo un lugar en la internet para ponerles el demo, pero les dejo el lightbox.zip con el demo de esto funcionando (y una imagen bastante mala de la caja).

TO DO

  1. Generar los div’s del lightbox de manera dinámica.
  2. Generar un plugin para jQuery, para poder usarlo como jQuery(‘selector’).LightBox();
  3. Poder obtener de manera dinámica el tipo de contenido a mostrar (desde el enlace que abre el lightbox)
  4. Merjorar la animación, ya que si se quieren hacer cosas más elaboradas habría que escribir mucho código
  5. Revisar si para cualquier estructura/estilo (X)HTML funciona la sobreposición de la capa
  6. Arreglar la capa sobrepuesta en IE6 (no muestra la transparencia)
  7. Hacerlo con otros frameworks

Bueno, resulta que en Ingenia no he desarrollado tanta tarea de programación y sí más maquetación con CSS y viendo el uso de jQuery (jeje, que hace bien fácil todo).

Con esto se han presentado problemas interesantes que se me ha ocurrido una solución, pero que no las he realizado (porque siempre hay que hacer las cosas corriendo porque se tienen que entregar ya), mientras les pongo los problemas (y las soluciones si encontre):

  • Poner una imagen de fondo que se ajuste a la resolución del navegador: el problema es que las imagenes de fondo no pueden cambiarse el tamaño (es lo que sé) pero una imagen sí (definiendo con CSS o en la etiqueta directa de la imagen) un tamaño diferente, entonces es generar una imagen con posición absoluta y poner el contenido en frente con la posición absoluta o relativa (eso depende de la maqueta) y redimensionar solo con javascript (o jQuery) la imagen de fondo.
  • Resulta que uno puede definir una imagen de fondo para una fila de una tabla (tr) con CSS sin problema y Firefox y Opera lo muestran sin problemas, pero Internet Explorer y Safari ponen para cada columna de la fila ese fondo. En IE encontre una solución (medio extraña) pero en Safari nada más no había solución (hasta donde investigue).

Y pues son solo dos que se me presentaron a mi en este tiempo que llevo y pronto pondre la solución en html de la primera (jejeje).

Resulta que la emoción por entrar a Ingenia termino hace unos días, pero por el problema de que la página que se estaba haciendo (y en la que participe) se quería para un día anterior.
Pero tampoco fue responsabilidad de mi administrador de projectos y el estaba igual que yo (aunque por estar frente al cliente tiene que guardar ese tipo de molestias, según yo).
Lo que sí he notado es que en verdad falta un administrador de proyectos (con estudios de esas cosas) para en verdad establecer practicas/metodologías para desarrollar un trabajo más organizado y que refleje la idea de la empresa, sino solo se van ahogando en un vaso de agua solitos.
Pero, que en verdad se use sus conocimientos. No como muchas empresas que se certifican o se compran su RUP y piensan que ya pueden hacer todo bien y olvidando lo que una organización/metodología menciona.
Pero bueno, por el momento solo soy un maquetador al servicio de l@s diseñadores/as, que por el momento si me dan la vuelta en cuanto a herramientas como jQuery

(perdonen que no tiene formato, lo hice desde la herramienta para postear rápidamente del wordpress)

Esta información fue enviada en un archivo pdf al Consorcio Jurídico del Centro, mostrando la posición oficial de asunto de censura a este blog por su cliente.

México, 26 de Junio del 2009

Consorcio Juridico del Centro
Presente

Por medio del presente documento les hago de su conocimiento mi posición respecto al asunto con su cliente NEUBOX S. A. de C. V.
En primer lugar los comentarios mostrados en https://ixmael.wordpress.com (blog de ahora en adelante) tienen el sustento en la relación de AMISTAD con la persona que fue directamente afectada por el servicio que fue proporcionado por su cliente y por ser parte del proyecto Pet Shop Boys México.

Como hice de su conocimiento en un correo electrónico enviado el día 25 de Junio del 2009 los comentarios han sido provisionalmente eliminados. Dada la garantía individual de libre expresión, me veo en la PENOSA NECESIDAD de mostrar próximamente la página principal de los comentarios, no sin antes hacer una modificación sobre los comentarios atribuidos directamente al blog.

La posición del blog respecto a los comentarios es conocida, dado que se accedió a la petición de su cliente, pero dado que el carácter de ALTA CONCIENCIA SOCIAL del blog se ha establecido una licencia Creative Commons 2.5, lo que NO HACE RESPONSABLE ni al blog ni a la persona que esta al frente de este por el uso y/o distribución que se le ha dado a estos comentarios por parte de TERCEROS, ya sean personas y/o programas de software.

Saludos cordiales.
https://ixmael.wordpress.com