En este tutorial vamos a crear una galería impresionante de página completa con miniaturas desplazable y una vista previa de desplazamiento de pantalla completa. La idea es tener una barra de miniaturas en la parte inferior de la página que se desplaza automáticamente cuando el usuario mueve el ratón. Cuando se hace clic en una miniatura, que se mueve al centro de la página y la imagen de pantalla completa se carga en segundo plano. Ahora el usuario puede moverse hacia arriba y hacia abajo y la imagen se desplaza automáticamente, dándole la oportunidad de ver toda la imagen.

Vamos a utilizar algunas propiedades CSS3 Webkit para mejorar el aspecto y la funcionalidad de jQuery.
Es por eso que la demo se ve mejor en los navegadores WebKit como Google Chrome o Safari de Apple.

HTML

El HTML consta de un div contenedor principal de la galería. Dentro de ese envoltorio que tendrá la imagen de pantalla completa, una superposición de un efecto de semitono bonito patrón, un div carga, los elementos de navegación y las miniaturas de barras:

…

También vamos a añadir una “Vista en miniatura” div que aparece cuando las imágenes están ocultos.
Estamos usando (abusando) el atributo alt de la imagen para mantener la ruta a la imagen completa.
Echemos un vistazo al estilo.

CSS

En primer lugar, vamos a restablecer el estilo y definir algunas propiedades principales para el cuerpo:
[cc lang='css' ]*{ margin:0; padding:0; } body { background:#212121; overflow:hidden; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; color:#fff; font-size:10px; }[/cc]
A continuación, vamos a definir el estilo para el contenedor desplazable pulgares. La mayor parte de el estilo es una adaptación de scroller miniatura de Malihu. Nos acaba de editar algo de relleno y los márgenes, y añadió una reflexión webkit a todo el recipiente:
[cc lang='css' ]#outer_container{ position:fixed; bottom:-160px; margin:0px 0px 30px 0px; height:130px; padding:0; -webkit-box-reflect: below 5px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.6, transparent), to(rgb(18, 18, 18)) ); } [/cc]
El valor de fondo del recipiente es negativo con el fin de ocultar la barra de miniaturas. Al cargar la página, se muestra la barra.

Las clases siguientes se define el estilo de los elementos internos del contenedor en miniatura:

#thumbScroller{
position:relative;
overflow:hidden;
}
#thumbScroller .container{
position:relative;
left:0;
}
#thumbScroller .content{
float:left;
}
#thumbScroller .content div{
margin:2px;
height:100%;
}

Las miniaturas van a tener un borde blanco de grosor y vamos a limitar su altura a 120px:

#thumbScroller img,
img.clone{
	border:5px solid #fff;
	height:120px;
}
#thumbScroller a{
	padding:2px;
	outline:none;
}

El modelo de semitono se muestra por el elemento de superposición que se extendía sobre toda la pantalla y se mueve cuando nos vaya pues se fija:

.fp_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/icons/pattern2.png) repeat-x bottom left;
}

El div carga aparecerá cada vez que haga clic sobre la imagen y esperar a que la imagen completa de la carga. Se centrará en la pantalla con la ayuda de el truco “50%”:

.fp_loading{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	margin:-35px 0px 0px -35px;
	background:#000 url(../images/icons/loader.gif) no-repeat center center;
	width:70px;
	height:70px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	z-index:999;
	opacity:0.7;
}

Los elementos de navegación será de estilo de la siguiente manera:

.fp_next,
.fp_prev{
	width:50px;
	height:50px;
	position:fixed;
	top:50%;
	margin-top:-15px;
	cursor:pointer;
	opacity:0.5;
}
.fp_next:hover,
.fp_prev:hover{
	opacity:0.9;
}
.fp_next{
	background:#000 url(../images/icons/next.png) no-repeat center center;
	right:-50px;
}
.fp_prev{
	background:#000 url(../images/icons/prev.png) no-repeat center center;
	left:-50px;
}

Mientras que los elementos de navegación se encuentra a la izquierda y la derecha y centrada verticalmente, vamos a cambiar la posición del elemento en la parte inferior de la página, centrado horizontalmente:

.fp_thumbtoggle{
	height:50px;
	background:#000;
	width:200px;
	text-align:center;
	letter-spacing:1px;
	text-shadow:1px 1px 1px #000;
	position:fixed;
	left:50%;
	margin-left:-100px;
	bottom:-50px;
	line-height:50px;
	cursor:pointer;
	opacity:0.8;
}
.fp_thumbtoggle:hover{
	opacity:1.0;
}

Al pasar un div no funciona en todos los navegadores y también se puede hacer con jQuery.

Y, por último, el estilo de la imagen completa. Aquí ponemos el ancho para estar siempre al 100%, llenando la pantalla completa. Esto podría hacer que la imagen se vea pixelado en las pantallas grandes, pero tenemos nuestro patrón de medios tonos para reducir el efecto:)

img.fp_preview{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}

Javascript

En la cabeza de nuestro documento HTML vamos a añadir el scroller miniatura jQuery por Malihu. Vamos a utilizar el mismo tamaño, desplazador horizontal con alivio. Es por eso que también tenemos que incluir la secuencia de comandos facilitando tras la inclusión de la secuencia de comandos jQuery.

En nuestra función de jQuery en primer lugar definiremos algunas variables:

//current thumb's index being viewed
var current			= -1;
//cache some elements
var $btn_thumbs = $('#fp_thumbtoggle');
var $loader		= $('#fp_loading');
var $btn_next		= $('#fp_next');
var $btn_prev		= $('#fp_prev');
var $thumbScroller	= $('#thumbScroller');

Entonces vamos a llamar a la función showThumbs que hará que el contenedor en miniatura aparecen desde la parte inferior de la página:

showThumbs(2000);

A continuación, hará que la página entera de desplazamiento vertical en el movimiento del ratón. Cuando una imagen de tamaño completo se carga, queremos que esta funcionalidad esté disponible:

makeScrollable();

Cuando hacemos clic en una miniatura, un montón de cosas van a suceder. En primer lugar, vamos a crear un clon de la imagen actual, que a continuación se trasladarán al centro de la página. Entonces vamos a cargar la imagen en tamaño completo y cuando termina de cargar, queremos que el clon en miniatura para ampliar y fade out. También vamos a ocultar las miniaturas y mostrar los “Ver miniaturas” botón:
ver el código fuente de impresión?

$thumbScroller.find('.content').bind('click',function(e){
	var $content= $(this);
	var $elem 	= $content.find('img');
	//keep track of the current clicked thumb
	//it will be used for the navigation arrows
	current 	= $content.index()+1;
	//get the positions of the clicked thumb
	var pos_left 	= $elem.offset().left;
	var pos_top 	= $elem.offset().top;
	//clone the thumb and place
	//the clone on the top of it
	var $clone 	= $elem.clone()
	.addClass('clone')
	.css({
		'position':'fixed',
		'left': pos_left + 'px',
		'top': pos_top + 'px'
	}).insertAfter($('BODY'));

	var windowW = $(window).width();
	var windowH = $(window).height();

	//animate the clone to the center of the page
	$clone.stop()
	.animate({
		'left': windowW/2 + 'px',
		'top': windowH/2 + 'px',
		'margin-left' :-$clone.width()/2 -5 + 'px',
		'margin-top': -$clone.height()/2 -5 + 'px'
	},500,
	function(){
		var $theClone 	= $(this);
		var ratio		= $clone.width()/120;
		var final_w		= 400*ratio;

		$loader.show();

		//expand the clone when large image is loaded
		$('<img/>').load(function(){
			var $newimg 		= $(this);
			var $currImage 	= $('#fp_gallery').children('img:first');
			$newimg.insertBefore($currImage);
			$loader.hide();
			//expand clone
			$theClone.animate({
				'opacity'		: 0,
				'top'			: windowH/2 + 'px',
				'left'			: windowW/2 + 'px',
				'margin-top'	: '-200px',
				'margin-left'	: -final_w/2 + 'px',
				'width'			: final_w + 'px',
				'height'		: '400px'
			},1000,function(){$(this).remove();});
			//now we have two large images on the page
			//fadeOut the old one so that the new one gets shown
			$currImage.fadeOut(2000,function(){
				$(this).remove();
			});
			//show the navigation arrows
			showNav();
		}).attr('src',$elem.attr('alt'));
	});
	//hide the thumbs container
	hideThumbs();
	e.preventDefault();
});

Cuando hacemos clic en la fotografía botón “Ver”, se exhibirá el contenedor de imágenes en miniatura y ocultar el botón y los elementos de navegación:

$btn_thumbs.bind('click',function(){
	showThumbs(500);
	hideNav();
});

function hideThumbs(){
	$('#outer_container').stop().animate({'bottom':'-160px'},500);
	showThumbsBtn();
}

function showThumbs(speed){
	$('#outer_container').stop().animate({'bottom':'0px'},speed);
	hideThumbsBtn();
}

function hideThumbsBtn(){
	$btn_thumbs.stop().animate({'bottom':'-50px'},500);
}

function showThumbsBtn(){
	$btn_thumbs.stop().animate({'bottom':'0px'},500);
}

function hideNav(){
	$btn_next.stop().animate({'right':'-50px'},500);
	$btn_prev.stop().animate({'left':'-50px'},500);
}

function showNav(){
	$btn_next.stop().animate({'right':'0px'},500);
	$btn_prev.stop().animate({'left':'0px'},500);
}

Los eventos para navegar por el conjunto de imágenes una vez que se carga:

$btn_next.bind('click',showNext);
$btn_prev.bind('click',showPrev);

Las siguientes dos funciones se cargará la imagen anterior o posterior y el lugar antes de la actual que se desvanecerá:

function showNext(){
	++current;
	var $e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	if($e_next.length == 0){
		current = 1;
		$e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	}
	$loader.show();
	$('<img/>').load(function(){
		var $newimg 		= $(this);
		var $currImage 		= $('#fp_gallery').children('img:first');
		$newimg.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){$(this).remove();});
	}).attr('src',$e_next.find('img').attr('alt'));
}

function showPrev(){
	--current;
	var $e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	if($e_next.length == 0){
		current = $thumbScroller.find('.content').length;
		$e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	}
	$loader.show();
	$('<img/>').load(function(){
		var $newimg 		= $(this);
		var $currImage 		= $('#fp_gallery').children('img:first');
		$newimg.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){$(this).remove();});
	}).attr('src',$e_next.find('img').attr('alt'));
}

Y, por  último, la función makeScrollable que hará que la página de  desplazamiento cuando el usuario mueve el ratón hacia arriba o hacia  abajo:
<pre>function makeScrollable(){
	$(document).bind('mousemove',function(e){
		var top = (e.pageY - $(document).scrollTop()/2) ;
		$(document).scrollTop(top);
	});
}

Original de tympanus.net

¿Qué es EditableGrid?

EditableGrid es una biblioteca Javascript de código abierto con el objetivo de convertir tablas HTML en componentes avanzados editables.

Se centra en la simplicidad.

Esta librería esta desarrollada por http://www.webismymind.be
Características principales

* La carga de la red XML o se adaptan a una tabla existente de HTML
* Fácil de usar y fácil integración con aplicaciones web existentes
* Cada columna se escribe (cadena, entero, doble, boolean, url, email, fecha)
* Modificar las células con un editor adecuado, de acuerdo con el tipo de columna (por ejemplo, casilla de verificación para boolean)
* Posibilidad de declarar una lista de posibles valores para las celdas de una columna (estática o en Javascript)
* Gestión de la unidad, la precisión y valores NaN para las columnas numéricas
* Construida en los validadores para las columnas de tipo entero, dobles, URL, correo electrónico y fecha
* Ordenar las columnas de acuerdo a sus tipos, haciendo clic en el encabezado de columna
* PHP: construir su red en PHP y dejar que genere el archivo XML
* Filtrado de la red
* Insertar y eliminar filas
* Abrir el cuadro de la integración de Flash para hacer gráficos de los datos de la red (el gráfico se puede seguir cuando las columnas de datos de edición o clasificación)
* Devoluciones de llamada para todos los eventos: carga, edición, clasificación, etc

Diseño: Piedrapapeltijera
Programación: Mofase
Tecnologías: Jquery – (x)HTML & CSS – Mysql – Php – Javascript

Diseño: Piedrapapeltijera
Programación: Mofase
Tecnologías: Jquery – (x)HTML & CSS – Mysql – Php – Javascript

countdown jquery

El codigo es el siguiente:

Empezaremos por el css:

Este es el del fichero: jquery.countdown.css

/* jQuery Countdown styles 1.5.5. */
.hasCountdown {
 /*border: 1px solid #ccc;
 background-color: #eee;*/
}
.countdown_rtl {
 direction: rtl;
}
.countdown_holding span {
 background-color: #ccc;
}
.countdown_row {
 clear: both;
 width: 100%;
 padding: 0px 2px;
 text-align: center;
}
.countdown_show1 .countdown_section {
 width: 300px;
}
.countdown_show2 .countdown_section {
 width: 48%;
}
.countdown_show3 .countdown_section {
 width: 32.5%;
}
.countdown_show4 .countdown_section {
 width: 24.5%;
}
.countdown_show5 .countdown_section {
 width: 19.5%;
}
.countdown_show6 .countdown_section {
 width: 16.25%;
}
.countdown_show7 .countdown_section {
 width: 14%;
}
.countdown_section {
 display: block;
 float: left;
 font-size: 75%;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 color: #FFF;
 text-decoration: none;
}
.countdown_amount {
 font-size: 200%;
 font-family: Arial, Helvetica, sans-serif;
 color: #FFF;
 text-decoration: none;
}
.countdown_descr {
 display: block;
 width: 100%;
 font-family: Arial, Helvetica, sans-serif;
 color: #FFF;
 text-decoration: none;
}

Este es el de la capa que contiene el contador:

#date {
 width:300px;
 margin-top: 20px;
 margin-bottom: 40px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 2em;
 color: #FFF;

 }

Ahora paso a mostrar el codigo html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>::.:: Counte atras countdown ::.::</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown-es.js"></script>
<script type="text/javascript">
$(function () {
 $('#defaultCountdown').countdown({until: new Date(2010, 10 - 1, 25)});
});
</script>
</head>
<body bgcolor="#fff">
 <div id="date">
 <div id="defaultCountdown"></div>
 </div>
</body>
</html>

Codigo jquery para activar la fecha final de la cuenta atras:

$(function () {
$('#defaultCountdown').countdown({until: new Date(2010, 10 - 1, 25)});
});

Donde en new Date le indicaremos la fecha.

Ahora veremos los ficheros con la programación de jquery:

La traducción a Castellano la hizo Sergio Carracedo y la traducción a Gallego Moncho Pena. Os dejo la de Castellano

/* http://keith-wood.name/countdown.html
 * Spanish initialisation for the jQuery countdown extension
 * Written by Sergio Carracedo Martinez webmaster@neodisenoweb.com (2008) */
(function($) {
 $.countdown.regional['es'] = {
 labels: ['Años', 'Meses', 'Semanas', 'Dias', 'Horas', 'Minutos', 'Segundos'],
 labels1: ['Años', 'Meses', 'Semanas', 'Dias', 'Horas', 'Minutos', 'Segundos'],
 compactLabels: ['a', 'm', 's', 'g'],
 timeSeparator: ':', isRTL: false};
 $.countdown.setDefaults($.countdown.regional['es']);
})(jQuery);

El resto de ficheros los podeis encontrar en la web del autor que es la siguiente: http://keith-wood.name/countdown.html

Tiene una sección de descargas donde se pueden ver y descargar los ejemplos.

http://css-tricks.com/

En mofase pretendemos crear una comunidad de trabajo con otras empresas y freelance ya que somos de la creencia que en la colaboración esta el exito en una gran parte de proyectos.