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