Artículo

---

0 ¡votar!

Original galería de imágenes creada con Jquery

Vamos a ver la forma de crear una galería de imágenes utilizando Jquery. Nuestra galería será un muro lleno de miniaturas de imágenes, y una vez que nosotros pulsemos en una de ella, lo que hará será que la imagen en grande aparecerá viniendo de la parte de abajo, y ya desde ahí podremos ir pasando por todas las imágenes que hayamos puesto en el muro.


También vamos a utilizar una función para adaptar la imagen al tamaño de la pantalla, así si deseamos cambiar el tamaño de la pantalla, la imagen se adaptará de forma automática.


Por tema de simplicidad, en el código que adjuntamos, hemos repetido las mismas fotos una y otra vez.


Empecemos con el código.


El código HTML, estará compuesto de tres contenedores:

1. Contenedor para la información de la imagen.
2. Contenedor para las miniaturas.
3. Contenedor para la imagen ampliada.

<div class="infobar">
<span id="description"></span>
<span id="loading">Loading Image</span>
</div>
<div id="thumbsWrapper">
<div id="content" >
<img src="thumbs/1.JPG" alt="images/1.JPG" title="something"/>
<img src="thumbs/2.JPG" alt="images/2.JPG" title="something"/>
...
<div class="placeholder"></div>
</div>
</div>
<div id="panel">
<div id="wrapper">
<a id="prev"></a>
<a id="next"></a>
</div>
</div>

Vayamos ahora con el tema de los estilos.
Lo primero será asignar algunos estilos generales

*{
margin:0;
padding:0;
}
body{
background-color:#000;
font-family:Verdana;
text-transform:uppercase;
color:#fff;
font-size:10px;
overflow:hidden;
}

La barra de información siempre estará en la misma posición, indiferentemente de si se ve las miniaturas o la imagen a pantalla completa. Su estilo sería:

.infobar{
background-color:#000;
height:28px;
line-height:28px;
right:20px;
position:fixed;
bottom:0px;
left:20px;
z-index:999999999;
text-align:center;
color:#ddd;
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
text-shadow:0px 0px 1px #ccc;
}

La descripción y los elementos de carga tendrán los siguientes estilos

span#description{
text-shadow:1px 1px 1px #000;
display:none;
}
span#loading{
display:none;
padding-right: 30px;
background:transparent url(../loading.gif) no-repeat center right;
}

El contenedor de las miniaturas ocupará todo el área. Los estilos que le daremos serán los siguientes.

#thumbsWrapper{
overflow:hidden;
position:fixed;
height:100%;
width:100%;
left:0px;
right:0px;
bottom:0px;
}

El resto de estilos os lo ponemos a continuación.

#content{
position:absolute;
top:0px;
height:100%;
width:100%;
left:0px;
background-color:#111;
overflow-y:scroll;
display:none;
}
#content img{
float:left;
margin:2px;
cursor:pointer;
opacity:0.4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
.placeholder{
float:left;
clear:both;
width:100%;
height:30px;
}
#panel{
background-color:#222;
width:100%;
position:fixed;
bottom:0px;
left:0px;
right:0px;
height:0px;
text-align:center;
}
#panel img{
cursor:pointer;
position:relative;
border:1px solid #000;
-moz-box-shadow:0px 0px 10px #111;
-webkit-box-shadow:0px 0px 10px #111;
box-shadow:0px 0px 10px #111;
display:none;
}
#wrapper{
position:relative;
margin:40px auto 0px auto;
}
a#next,
a#prev{
width:40px;
height:40px;
position:fixed;
cursor:pointer;
outline:none;
display:none;
background:#aaa url(../nav.png) no-repeat top left;
}
a#next:hover, a#prev:hover{
background-color:#fff;
}
a#next{
right:0px;
top:50%;
margin-top:-20px;
background-position: 0px 0px;
}
a#prev{
left:0px;
top:50%;
margin-top:-20px;
background-position: 0px -40px;
}

Ahora pasaremos al código correspondiente al JavaScript, que como hemos indicado anteriormente, utilizaremos la librería JQuery para la creación de la galería.


Con las siguientes instrucciones lo que hacemos es capturar el click que se hace sobre la miniatura. Una vez pulsado en la barra de información se hace la carga de nuestro elemento de carga. El código solo se ejecutará una vez que la imagen haya cargado completamente. También ocultamos el contenedor de las miniaturas y cargamos la información de la imagen en la barra de información.

$('#content > img').hover(function () {
var $this   = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this   = $(this);
$this.stop().animate({'opacity':'0.4'},200);
}).bind('click',function(){
var $this   = $(this);
/* shows the loading icon */
$('#loading').show();
$('').load(function(){
$('#loading').hide();
if($('#wrapper').find('img').length) return;
current 	= $this.index();
var $theImage   = $(this);
/*
After it's loaded we hide the loading icon
and resize the image, given the window size;
then we append the image to the wrapper
*/
resize($theImage);
$('#wrapper').append($theImage);
/* make its opacity animate */
$theImage.fadeIn(800);
/* and finally slide up the panel */
$('#panel').animate({'height':'100%'},speed,function(){
/*
if the picture has a description,
it's stored in the title attribute of the thumb;
show it if it's not empty
*/
var title = $this.attr('title');
if(title != '')
$('#description').html(title).show();
else
$('#description').empty().hide();
/*
if our picture is the first one,
don't show the "previous button"
for the slideshow navigation;
if our picture is the last one,
don't show the "next button"
for the slideshow navigation
*/
if(current==0)
$('#prev').hide();
else
$('#prev').fadeIn();
if(current==parseInt(totalpictures-1))
$('#next').hide();
else
$('#next').fadeIn();
/*
we set the z-index and height of the thumbs wrapper
to 0, because we want to slide it up afterwards,
when the user clicks the large image
*/
$('#thumbsWrapper').css({'z-index':'0','height':'0px'});
});
}).attr('src', $this.attr('alt'));
});

Con el siguiente trozo de código, lo que hacemos es darle los eventos a los botones de desplazamiento por las imágenes una vez que estas están ampliadas.

$('#wrapper > img').live('click',function(){
$this = $(this);
$('#description').empty().hide();
$('#thumbsWrapper').css('z-index','10')
.stop()
.animate({'height':'100%'},speed,function(){
var $theWrapper = $(this);
$('#panel').css('height','0px');
$theWrapper.css('z-index','0');
/*
remove the large image element
and the navigation buttons
*/
$this.remove();
$('#prev').hide();
$('#next').hide();
});
});

Por último la función final que os pasamos, lo que hace es adaptar la imagen al tamaño de la pantalla

function navigate($nextimage,dir){
/*
if we are at the end/beginning
then there's no next/previous
*/
if(dir=='left' && current==0)
return;
if(dir=='right' && current==parseInt(totalpictures-1))
return;
$('#loading').show();
$('').load(function(){
var $theImage = $(this);
$('#loading').hide();
$('#description').empty().fadeOut();
$('#wrapper img').stop().fadeOut(500,function(){
var $this = $(this);
$this.remove();
resize($theImage);
$('#wrapper').append($theImage.show());
$theImage.stop().fadeIn(800);
var title = $nextimage.attr('title');
if(title != ''){
$('#description').html(title).show();
}
else
$('#description').empty().hide();
if(current==0)
$('#prev').hide();
else
$('#prev').show();
if(current==parseInt(totalpictures-1))
$('#next').hide();
else
$('#next').show();
});
/*
increase or decrease the current variable
*/
if(dir=='right')
++current;
else if(dir=='left')
--current;
}).attr('src', $nextimage.attr('alt'));
}
/*
resizes an image given the window size,
considering the margin values
*/
function resize($image){
var windowH      = $(window).height()-100;
var windowW      = $(window).width()-80;
var theImage     = new Image();
theImage.src     = $image.attr("src");
var imgwidth     = theImage.width;
var imgheight    = theImage.height;
if((imgwidth > windowW)||(imgheight > windowH)){
if(imgwidth > imgheight){
var newwidth = windowW;
var ratio = imgwidth / windowW;
var newheight = imgheight / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newheight>windowH){
var newnewheight = windowH;
var newratio = newheight/windowH;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
}
else if(imgwidth < imgheight){ 				var newheight = windowH; 				var ratio = imgheight / windowH; 				var newwidth = imgwidth / ratio; 				theImage.height = newheight; 				theImage.width= newwidth; 				if(newwidth>windowW){
var newnewwidth = windowW;
var newratio = newwidth/windowW;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
}
}
$image.css({'width':theImage.width+'px','height':theImage.height+'px'});
}

Os dejamos el código para que podáis probarlo.


Vía: Tympanus

Descargar adjuntos

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios