Artículo

---

0 ¡votar!

Crear una galería de imágenes colgadas en Flickr

Como todo el mundo sabe, Flickr es una red social donde los usuarios pueden compartir sus fotos, vídeos... con el resto de usuarios. Hoy vamos a utilizar el API de Flickr para crear una original galería de imágenes utilizando una cuenta de Flickr.

Lo primero que hacemos es crear el código HTML. Este código estará compuesto de varios div, muchos de ellos ocultos, que se harán visibles mediante el control de estos contenedores con javascript.

<!-- main wrapper: flickr_photobar -->
<div class="flickr_photobar">		
<!-- overlay for the full image view -->
<div id="flickr_overlay" class="overlay" style="display:none;"></div>
<!-- full image view -->
<div id="flickr_photopreview" class="photopreview" style="display:none;">
<div class="preview_wrapper">
<div class="preview">
<div class="loading"></div>
<div id="preview_close" class="close"></div>
<span id="large_phototitle"></span>
<!-- here we will insert the image-->
<a href="#" class="img_next"></a>
<a href="#" class="img_prev"></a>
</div>
</div>
</div>
<!-- the bottom photobar -->
<div id="photobar" class="photobar">	
<!-- the thumbnail view of the albums/sets -->
<div class="thumbs albums" id="sets">
<a href="#" class="prev"></a>
<div class="thumbsWrapper">
<ul></ul>
</div>
<a href="#" class="next"></a>
</div>
<!-- the thumbnail view of the images of a set -->
<div class="thumbs images" id="images" style="bottom:-125px;">
<a href="#" class="prev"></a>
<div class="thumbsWrapper">
<ul></ul>
</div>
<a href="#" class="next"></a>
<!-- the right handle for the info-->
<span class="images_toggle">
Set:
<span id="setName"></span>
<a id="images_toggle">Back to Sets</a>
</span>
</div>
<!-- the left handle for the main photobar -->
<a id="flickr_toggle" class="toggle">
Flickr Photostream
<span style="visibility:hidden;" class="loading_small"></span>
</a>
</div>
</div>

La siguiente parte que vamos a ver son los distintos estilos que vamos a utilizar en el diseño de la galería. Como siempre, empezamos con los estilos generales

.flickr_photobar{
font-family:Arial,Helvetica,sans-serif;
text-transform:uppercase;
font-size:11px;
}
.flickr_photobar a{
outline:none;
}
.flickr_photobar a:hover{
outline:none;
}
Los estilos del div del photobar serán los siguientes:

.photobar{
position:fixed;
bottom:-96px;
left:0px;
width:100%;
height:95px;
}

Tendremos oculta esta barra dándole un valor negativo a la propiedad Bottom, que será cambiado cuando pulsemos para que sea visible. Los estilos para la imágenes en miniatura son los siguientes:

.thumbs{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:95px;
border-top:1px solid #222;
background-color:#3D3D3D;
}

A continuación indicamos los estilos para los botones de siguiente y posterior:

.thumbs a.prev,
.thumbs a.next{
width:20px;
height:83px;
position:absolute;
top:4px;
margin:0px;
z-index:10;
border:1px solid #222;
-moz-box-shadow:0px 0px 1px #777 inset;
-webkit-box-shadow:0px 0px 1px #777 inset;
box-shadow:0px 0px 1px #777 inset;
}
.thumbs a.prev:hover,
.thumbs a.next:hover{
background-color:#404040;
}
.thumbs a.prev{
left:0px;
background:#333 url(../prev.png) no-repeat center center;
}
.thumbs a.next{
right:0px;
background:#333 url(../next.png) no-repeat center center;
}

Los estilos para las imágenes en miniaturas son estos que os indicamos a continuación:

.thumbs .thumbsWrapper{
height:95px;
left:22px;
right:22px;
overflow:hidden;
position:absolute;
top:0;
}

Ahora pondremos los estilos para las listas desordenadas de las imágenes en miniaturas. El ancho de esta listas será calculado dinámicamente dependiendo del número de miniaturas que haya.

.thumbs ul{
list-style:none;
margin:0px;
padding:0px;
height:90px;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
}
.thumbs ul li a{
position:relative;
float:left;
margin:6px 2px 0px 2px;
color:#fff;
text-shadow:1px 1px 1px #000;
text-decoration:none;
height:81px;
width:81px;
}

Le damos estilos a los bordes de las miniaturas

.albums ul li a img{
border:3px solid #111111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}
.images ul li a img{
border:3px solid #f9f9f9;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}

Cada imagen tendrá una descripción, que aparecerá encima de cada miniatura. Le daremos estilos para que aparezca encima de una forma transparente.

.thumbs a span{
position:absolute;
bottom:3px;
left:3px;
right:3px;
background-color:#333;
font-size:9px;
padding:2px 2px;
border-top:1px solid #111;
display:none;
text-align:center;
overflow:hidden;
text-overflow:ellipsis;
max-height:70px;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
.thumbs a:hover span{
display:block;
}

Estilos para el manejador de las imágenes que aparecen en el lado derecho y el manejador principal de la photobar.

span.images_toggle{
position:absolute;
top:-26px;
right:20px;
background-color:#3D3D3D;
border:1px solid #222;
color:#EEEEEE;
font-size:10px;
padding:0px 6px 0px 12px;
height:24px;
line-height:24px;
text-transform:uppercase;
text-shadow:1px 1px 2px #000;
-moz-box-shadow:0px -1px 3px #ccc;
-webkit-box-shadow:0px -1px 3px #ccc;
box-shadow:0px -1px 3px #ccc;
-moz-border-radius:5px 5px 0px 0px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
span.images_toggle a{
background-color:#222;
border:1px solid #000;
cursor:pointer;
line-height:16px;
padding:0px 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
span.images_toggle a:hover{
background-color:#000;
}
.photobar a.toggle{
position:absolute;
top:-26px;
left:20px;
background-color:#3D3D3D;
border:1px solid #222;
color:#EEEEEE;
font-size:10px;
padding:0px 36px 0px 36px;
line-height:24px;
height:24px;
text-transform:uppercase;
text-shadow:1px 1px 2px #000;
-moz-box-shadow:0px -1px 3px #ccc;
-webkit-box-shadow:0px -1px 3px #ccc;
box-shadow:0px -1px 3px #ccc;
-moz-border-radius:5px 5px 0px 0px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
cursor:pointer;
}
span.loading_small{
background:transparent url(../loading_small.gif) no-repeat center center;
position:absolute;
right:10px;
top:0px;
width:16px;
height:24px;
}
.photobar a.toggle:hover{
background-color:#111;
}

El contenedor de las miniaturas, deben de tener un z-index mayor a la de los conjuntos.

.photobar .images{
z-index:20;
}

El estilo de la capa que se muestra cuando se visualiza una imagen completa es el siguiente:

.flickr_photobar .overlay{
z-index:90;
background-color:#000;
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

Marcamos la posición fija de modo que cuando el usuario se desplaza a la página, siempre se queda en la zona visible de la página

.photopreview{
text-align:center;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:91;
}

A continuación ponemos los estilos para que la imagen completa, esté centrada tanto vertical como horizontalmente.

.photopreview .preview_wrapper{
position:relative;
text-align:center;
margin:0 auto;
}
.photopreview .preview{
display:table-cell;
text-align:center;
width:0px;
height:0px;
padding-top:25px;
vertical-align:middle;
}
.photopreview .preview img{
vertical-align:middle;
background-color:#555;
padding:1px;
border:8px solid #f9f9f9;
-moz-box-shadow:1px 1px 5px #222;
-webkit-box-shadow:1px 1px 5px #222;
box-shadow:1px 1px 5px #222;
}

El estilo de la descripción de la imagen que aparece en la parte superior de cada imagen.

.photopreview .preview span{
background-color: #111111;
color:#FFFFFF;
height:20px;
left:0;
line-height:20px;
position:fixed;
text-align:center;
text-shadow:1px 1px 1px #000000;
top:0;
width:100%;
-moz-box-shadow:1px 1px 5px #000000;
-webkit-box-shadow:1px 1px 5px #000000;
box-shadow:1px 1px 5px #000000;
}

El estilo del div que nos indica que está cargando las imágenes.

.loading{
width:50px;
height:50px;
position:fixed;
top:50%;
left:50%;
z-index:95;
margin:-25px 0px 0px -25px;
-moz-border-radius:10px;
-webkit-border-radius:20px;
border-radius:10px;
background:#000 url(../loading.gif) no-repeat center center;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

Para la opción de cierre que aparece en la esquina superior derecha, los estilos que le daremos serán los siguientes.

.close{
background:#000 url(../close.png) no-repeat center center;
cursor:pointer;
height:20px;
position:fixed;
right:-11px;
top:0;
width:90px;
z-index:1000;
cursor:pointer;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

Y por último los estilos para los botones de siguiente y anterior cuando tenemos las imágenes en grande, serán estos que os indicamos.

.photopreview a.img_next,
.photopreview a.img_prev{
position:fixed;
top:50%;
height:60px;
width:50px;
margin-top:-30px;
background-color:#000;
background-repeat:no-repeat;
background-position:center center;
}
.photopreview a.img_next{
background-image:url(../next.png);
-moz-border-radius:20px 0px 0px 20px;
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
right:0px;
}
.photopreview a.img_prev{
background-image:url(../prev.png);
-moz-border-radius:0px 20px 20px 0px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
left:0px;
}

Dejamos ya de un lado los estilos y miramos ahora el código JavaScript. Para nuestro script, haremos uso del script basado en jquery viewport.

Empezamos el script definiendo algunas variables que necesitaremos más adelante.

var api_key 	= [your API Key];
var user_id  	= [your Flickr user ID];
/*
use:
Square,Thumbnail,Small,Medium or Original for
the large image size you want to load!
*/
var large_image_size 	= 'Medium';
/*
the current Set id / the current Photo id
*/
var photo_set_id,photo_id;
/*
the current position of the image being viewed
*/
var current	= -1;
var continueNavigation = false;
/*
flickr API Call to get List of Sets
*/
var sets_service 		= 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getList' + '&api_key=' + api_key;
var sets_url			= sets_service + '&user_id=' + user_id + '&format=json&jsoncallback=?';
/*
flickr API Call to get List of Photos from a Set
*/
var photos_service 		= 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos' + '&api_key=' + api_key;
/*
flickr API Call to get List of Sizes of a Photo
*/
var large_photo_service = 'http://api.flickr.com/services/rest/?&method=flickr.photos.getSizes' + '&api_key=' + api_key;
/*
elements caching...
*/
var $setsContainer 		= $('#sets').find('ul');
var $photosContainer 	= $('#images').find('ul');
var $photopreview		= $('#flickr_photopreview');
var $flickrOverlay		= $('#flickr_overlay');
var $loadingStatus		= $('#flickr_toggle').find('.loading_small');
var ul_width,spacefit,fit;

Lo primero que hacemos es cargar todos los distinto conjuntos que tenga el cliente.

/* start: open Flickr Photostream */
$('#flickr_toggle').toggle(function(){
$('#photobar').stop().animate({'bottom':'0px'},200,function(){
if($setsContainer.is(':empty')){
/*
if sets not loaded, load them
*/
LoadSets();
}
});
},function(){
/*
minimize the main bar, and minimize the photos bar.
next time we maximize, the view will be on the sets
*/
$('#photobar').stop().animate({'bottom':'-96px'},200,function(){
$('#images').css('bottom','-125px');
});
});
/*
Loads the User Photo Sets
*/
function LoadSets(){
$loadingStatus.css('visibility','visible');
$.getJSON(sets_url,function(data){
if(data.stat != 'fail') {
var sets_count = data.photosets.photoset.length;
/*
adapt ul width based on number of results
*/
ul_width = sets_count * 85 + 85;
$setsContainer.css('width',ul_width + 'px');
for(var i = 0; i < sets_count; ++i){
var photoset		= data.photosets.photoset[i];
var primary 		= photoset.primary;
var secret			= photoset.secret;
var server			= photoset.server;
var farm			= photoset.farm;
/*
source for the small thumbnail
*/
var photoUrl		= 'http://farm'+farm+'.static.flickr.com/'+server+'/'+primary+'_'+secret+'_s.jpg';
var $elem 			= $('<li />');
var $link 			= $('<a class="toLoad" href="#" />');
/*
save the info of the set in the li element,
we will use it later
*/
$link.data({
'primary'	:primary,
'secret'	:secret,
'server'	:server,
'farm'		:farm,
'photoUrl'	:photoUrl,
'setName'	:photoset.title._content,
'id'		:photoset.id
});
$setsContainer.append($elem.append($link));
$link.bind('click',function(e){
var $this = $(this);
/*
save the current Set id in the photo_set_id variable
and load the photos of that Set
*/
$('#images').stop().animate({'bottom':'0px'},200);
if(photo_set_id!=$this.data('id')){
photo_set_id = $this.data('id');
$('#setName').html($this.data('setName'));
LoadPhotos();
}
e.preventDefault();
});
}
/*
now we load the images
(the ones in the viewport)
*/
LoadSetsImages();
}
});
}
/*
loads the images of the sets that are in the viewport
*/
function LoadSetsImages(){
var toLoad 			= $('.toLoad:in-viewport').size();
if(toLoad > 0)
$loadingStatus.css('visibility','visible');
var images_loaded 	= 0;
$('.toLoad:in-viewport').each(function(i){
var $space			= $setsContainer.find('.toLoad:first');
var $img 			= $('<img style="display:none;" />').load(function(){
++images_loaded;
if(images_loaded == toLoad){
$loadingStatus.css('visibility','hidden');
$setsContainer.find('img').fadeIn();
}
}).attr('src',$space.data('photoUrl')).attr('alt',$space.data('id'));
var $set_name		= $('<span />',{'html':$space.data('setName')});
$space.append($set_name).append($img).removeClass('toLoad');
});
}

La siguientes funciones, lo que harán será cargar las imágenes del conjunto que hayamos seleccionado.

/*
Loads the Set's Photos
*/
function LoadPhotos(){
$photosContainer.empty();
$loadingStatus.css('visibility','visible');
var photos_url	= photos_service + '&photoset_id=' + photo_set_id + '&media=photos&format=json&jsoncallback=?';
$.getJSON(photos_url,function(data){
if(data.stat != 'fail') {
var photo_count = data.photoset.photo.length;
/*
adapt ul width based on number of results
*/
var photo_count_total = photo_count + $photosContainer.children('li').length;
ul_width = photo_count_total * 85 + 85;
$photosContainer.css('width',ul_width + 'px');
for(var i = 0; i < photo_count; ++i){
var photo			= data.photoset.photo[i];
var photoid			= photo.id;
var secret			= photo.secret;
var server			= photo.server;
var farm			= photo.farm;
var photoUrl		= 'http://farm'+farm+'.static.flickr.com/'+server+'/'+photoid+'_'+secret+'_s.jpg';
var $elem 			= $('<li />');
var $link 			= $('<a class="toLoad" href="#" />');
$link.data({
'photoid'		:photoid,
'secret'		:secret,
'server'		:server,
'farm'			:farm,
'photoUrl'		:photoUrl,
'photo_title'	:photo.title
});
$photosContainer.append($elem.append($link));
$link.bind('click',function(e){
var $this	= $(this);
current		= $this.parent().index();
photo_id 	= $this.data('photoid');
LoadLargePhoto();
e.preventDefault();
});
}
LoadPhotosImages();
}
});
}
/*
loads the images of the set's
photos that are in the viewport
*/
function LoadPhotosImages(){
var toLoad 			= $('.toLoad:in-viewport').size();
if(toLoad > 0)
$loadingStatus.css('visibility','visible');
var images_loaded 	= 0;
$('.toLoad:in-viewport').each(function(i){
var $space			= $photosContainer.find('.toLoad:first');
var $img 			= $('<img style="display:none;" />').load(function(){
++images_loaded;
if(images_loaded == toLoad){
$loadingStatus.css('visibility','hidden');
$photosContainer.find('img').fadeIn();
/*
if we were navigating through the large images set:
*/
if(continueNavigation){
continueNavigation 	= false;
var $thumb 			= $photosContainer.find('li:nth-child(' + parseInt(current + 1) + ')').find('img');
photo_id 			= $thumb.attr('alt');
LoadLargePhoto();
}
}
}).attr('src',$space.data('photoUrl'))
.attr('alt',$space.data('photoid'));
var $photo_title	= $('<span/>',{'html':$space.data('photo_title')});
$space.append($photo_title).append($img).removeClass('toLoad');
});
}

Por último, la función que hace que se cargue la imagen en tamaño normal.

/*
loads the main image
*/
function LoadLargePhoto(){
removeLargeImage();
var $theThumb 	= $photosContainer.find('li:nth-child(' + parseInt(current + 1) + ')').find('img');
var photo_title = $theThumb.parent().data('photo_title');
var $loading	= $photopreview.find('.loading');
$loading.show();
$photopreview.show();
$flickrOverlay.show();
$('#preview_close').show();
var large_photo_url = large_photo_service + '&photo_id=' + photo_id + '&format=json&jsoncallback=?';
$.getJSON(large_photo_url,function(data){
if(data.stat != 'fail') {
var count_sizes 		= data.sizes.size.length;
var largest_photo_src;
for(var i = 0; i < count_sizes; ++i){
if(data.sizes.size[i].label == large_image_size)
largest_photo_src 	= data.sizes.size[i].source;
}
$('<img />').load(function(){
var $this = $(this);
/*
resize the image to fit in the browser's window
*/
resize($this);
$loading.hide();
/*just to make sure there's no image:*/
removeLargeImage();
$photopreview.find('.preview').append($this);
$('#large_phototitle').empty().html(photo_title);
}).attr('src',largest_photo_src);
}
});
}

Pueden ver una demo aquí.
Descargar código.
Vía: tympanus.net

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios