Galería de imágenes a pantalla completa con jQuery
En este tutorial vamos a crear una página donde poder mostrar una galería de imágenes a pantalla completa. Como barra de desplazamiento, crearemos una con todas las miniaturas que forman parte de la galería. La barra se desplazará de forma automática según vayamos moviéndonos con el ratón sobre ella.
Cuando pulsamos sobre una miniatura, esta se mueve al centro de la página y es cargada a tamaño completo como fondo de pantalla. Nosotros nos podremos mover arriba y abajo por la imagen de forma automática, dándole al usuario la posibilidad de ver toda la imagen.
Para poder conseguir estos efectos, utilizaremos algunas propiedades nuevas de CSS 3 y jQuery para darle la funcionalidad.
Para la creación del scroll de miniaturas, haremos uso de una librería para jQuery que nos facilitará esta función, jQuery thumbnail scroller.
Como siempre, lo primero que haremos será crear la estructura HTML de la galería de imágenes. Esta estará formado por un contenedor principal, y dentro de este contenedor nosotros pondremos la imagen completa, además del scroll de miniaturas y los elementos de navegación por las imágenes y la opción de la vuelta a las miniaturas.
El código es el siguiente:
A continuación nos meteremos con los estilos. Lo primero que hacemos son indicar algunas propiedades principales para el cuerpo como son el margin, padding o el color de fondo entre otras.
Ahora veremos el estilo que le daremos al contenedor que contendrá al scroll de miniaturas. Muchos de estos estilos serán adaptados de la librería que utilizaremos para crear el scroll. Lo que si que le añadimos nuevo es el efecto reflection a todo el contenedor.
El valor bottom del contenedro le damos un valor negativo para ocultar la barra cuando cargamos la página, mostraremos la barra.
Las siguientes línes son para definir los estilos de los elementos que pondremos dentro del contenedor de las miniaturas.
Las miniaturas tendrán un delgado borde blanco y limitaremos la altura de la imagen a 120 px. Este es el código para hacer eso.
El div de carga aparecerá cuando nosotros hagamos click en una imagen y espera hasta que se cargue la imagen completamente. Esto estará centrado en la pantalla con el truco del 50%.
Los estilos de navegación son los siguientes.
Los elementos de navegación los situaremos centrados verticalmente tanto a la izquierda como a la derecha, pero la opción de vuelta a las miniaturas lo situaremos en la parte central de abajo.
Código:
Para finalizar, indicamos el estilo para la imagen completamente. El ancho será del 100 % ocupando toda la pantalla.
El siguiente paso es darle funcionalidad mediante JavaScript.
En el código HTML, nosotros hemos añadido la librería para la creación de las miniaturas de una forma sencilla. Nosotros hemos indicado que use el tamaño completo horizontal.
En nuestro código jQuery, lo primero que haremos será definir varias variables.
Después hacemos la llamada a la función “showThumbs” que hará que aparezca el contenedor con el scroll de miniaturas.
Lo siguiente que hacemos es hacer que la página se mueva verticalmente cuando nos desplazamos con el ratón cuando la imagen está cargada completamente
Cuando pulsemos en una miniatura, un motón de cosas ocurrirán. Primero se creará un clon de la miniatura pulsada que se moverá al centro de la página. Luego se cargará la imagen a pantalla completa. Nosotros queremos que el clon de la miniatura se expanda hasta que desaparezca. Por último ocultaremos la barra de miniaturas y mostraremos el botón de “Ver miniaturas”.
Cuando pulsemos en el botón de ver miniaturas, se volverá a mostrar el contenedor con el scroll y ocultaremos los botones de navegación.
También habrá que asignar los eventos para poder desplazarse por las imágenes con los botones de desplazamiento.
Esas dos funciones cargarán la imagen anterior y posterior.
Por último el código de la función para mover la imagen arriba y abajo cuando esta esté cargada completamente es:
Bueno amigos de Taringa Con esto terminamos esta aplicación. Pueden ver una demo en este enlace.
demo: http://tympanus.net/Tutorials/FullPageImageGallery/
En este tutorial vamos a crear una página donde poder mostrar una galería de imágenes a pantalla completa. Como barra de desplazamiento, crearemos una con todas las miniaturas que forman parte de la galería. La barra se desplazará de forma automática según vayamos moviéndonos con el ratón sobre ella.
Cuando pulsamos sobre una miniatura, esta se mueve al centro de la página y es cargada a tamaño completo como fondo de pantalla. Nosotros nos podremos mover arriba y abajo por la imagen de forma automática, dándole al usuario la posibilidad de ver toda la imagen.
Para poder conseguir estos efectos, utilizaremos algunas propiedades nuevas de CSS 3 y jQuery para darle la funcionalidad.
Para la creación del scroll de miniaturas, haremos uso de una librería para jQuery que nos facilitará esta función, jQuery thumbnail scroller.
Como siempre, lo primero que haremos será crear la estructura HTML de la galería de imágenes. Esta estará formado por un contenedor principal, y dentro de este contenedor nosotros pondremos la imagen completa, además del scroll de miniaturas y los elementos de navegación por las imágenes y la opción de la vuelta a las miniaturas.
El código es el siguiente:
[color=#000000][color=#000000][color=#000000]<div id="fp_gallery" class="fp_gallery">
<img src="images/1.jpg" alt="" id="preview" class="fp_preview" style=display:none;/>
<div class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb" /></a></div>
</div>
...
</div>
</div>
</div>
<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
</div>[/color][/color][/color]
A continuación nos meteremos con los estilos. Lo primero que hacemos son indicar algunas propiedades principales para el cuerpo como son el margin, padding o el color de fondo entre otras.
[color=#000000][color=#000000][color=#000000]*{
margin:0;
padding:0;
}
body {
background:#212121;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#fff;
font-size:10px;
}[/color][/color][/color]
Ahora veremos el estilo que le daremos al contenedor que contendrá al scroll de miniaturas. Muchos de estos estilos serán adaptados de la librería que utilizaremos para crear el scroll. Lo que si que le añadimos nuevo es el efecto reflection a todo el contenedor.
[color=#000000][color=#000000][color=#000000]#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))
);
}[/color][/color][/color]
El valor bottom del contenedro le damos un valor negativo para ocultar la barra cuando cargamos la página, mostraremos la barra.
Las siguientes línes son para definir los estilos de los elementos que pondremos dentro del contenedor de las miniaturas.
[color=#000000][color=#000000][color=#000000]#thumbScroller{
position:relative;
overflow:hidden;
}
#thumbScroller .container{
position:relative;
left:0;
}
#thumbScroller .content{
float:left;
}
#thumbScroller .content div{
margin:2px;
height:100%;
}[/color][/color][/color]
Las miniaturas tendrán un delgado borde blanco y limitaremos la altura de la imagen a 120 px. Este es el código para hacer eso.
[color=#000000][color=#000000][color=#000000]#thumbScroller img,
img.clone{
border:5px solid #fff;
height:120px;
}
#thumbScroller a{
padding:2px;
outline:none;
}[/color][/color][/color]
El div de carga aparecerá cuando nosotros hagamos click en una imagen y espera hasta que se cargue la imagen completamente. Esto estará centrado en la pantalla con el truco del 50%.
[color=#000000][color=#000000][color=#000000].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;
}[/color][/color][/color]
Los estilos de navegación son los siguientes.
[color=#000000][color=#000000][color=#000000].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;
}[/color][/color][/color]
Los elementos de navegación los situaremos centrados verticalmente tanto a la izquierda como a la derecha, pero la opción de vuelta a las miniaturas lo situaremos en la parte central de abajo.
Código:
[color=#000000][color=#000000][color=#000000].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;
}[/color][/color][/color]
Para finalizar, indicamos el estilo para la imagen completamente. El ancho será del 100 % ocupando toda la pantalla.
[color=#000000][color=#000000][color=#000000]img.fp_preview{
position:absolute;
left:0px;
top:0px;
width:100%;
}[/color][/color][/color]
El siguiente paso es darle funcionalidad mediante JavaScript.
En el código HTML, nosotros hemos añadido la librería para la creación de las miniaturas de una forma sencilla. Nosotros hemos indicado que use el tamaño completo horizontal.
En nuestro código jQuery, lo primero que haremos será definir varias variables.
[color=#000000][color=#000000][color=#000000]//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');[/color][/color][/color]
Después hacemos la llamada a la función “showThumbs” que hará que aparezca el contenedor con el scroll de miniaturas.
[color=#000000][color=#000000][color=#000000]showThumbs(2000);[/color][/color][/color]
Lo siguiente que hacemos es hacer que la página se mueva verticalmente cuando nos desplazamos con el ratón cuando la imagen está cargada completamente
[color=#000000][color=#000000][color=#000000]makeScrollable(); [/color][/color][/color]
Cuando pulsemos en una miniatura, un motón de cosas ocurrirán. Primero se creará un clon de la miniatura pulsada que se moverá al centro de la página. Luego se cargará la imagen a pantalla completa. Nosotros queremos que el clon de la miniatura se expanda hasta que desaparezca. Por último ocultaremos la barra de miniaturas y mostraremos el botón de “Ver miniaturas”.
[color=#000000][color=#000000][color=#000000]$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 class="fp_preview"/>').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();
});[/color][/color][/color]
Cuando pulsemos en el botón de ver miniaturas, se volverá a mostrar el contenedor con el scroll y ocultaremos los botones de navegación.
[color=#000000][color=#000000][color=#000000]$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);
}[/color][/color][/color]
También habrá que asignar los eventos para poder desplazarse por las imágenes con los botones de desplazamiento.
[color=#000000][color=#000000][color=#000000]$btn_next.bind('click',showNext);
$btn_prev.bind('click',showPrev);[/color][/color][/color]
Esas dos funciones cargarán la imagen anterior y posterior.
[color=#000000][color=#000000][color=#000000]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 class="fp_preview"/>').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 class="fp_preview"/>').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'));
}
[/color][/color][/color]
Por último el código de la función para mover la imagen arriba y abajo cuando esta esté cargada completamente es:
[color=#000000][color=#000000][color=#000000].
function makeScrollable(){
$(document).bind('mousemove',function(e){
var top = (e.pageY - $(document).scrollTop()/2) ;
$(document).scrollTop(top);
});
}
[/color][/color][/color]
Bueno amigos de Taringa Con esto terminamos esta aplicación. Pueden ver una demo en este enlace.
demo: http://tympanus.net/Tutorials/FullPageImageGallery/