0
Mostar imagenes de flickr a través de su api con jquery
Flickr es servicio de alojamiento de imágenes y vídeos, que basados en su popularidad, tu seguro ya debes conocer. Vamos a implementar un buscador de imágenes con paginado , Flickr ofrece una API con la cual ponemos buscar, escoger el tamaño de la imagen que queremos mostrar, entre otras funcionalidades.
Para nuestro objetivo nada mejor que jQuery como interfaz para hacer la consulta javascript al servidor de Flick, y le pedimos que nos devuelva la información en formato json, nosotros la recibimos y la parsemos a nuestro criterio.
Debemos de tener una api key para poder acceder a las búsquedas y aquí la podemos sacar.Primero editamos un fichero html que tenga el jQuery y un fichero JavaScript en cual va a tener las funciones para la búsqueda de imágenes.
flickr.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="flickr.js" type="text/javascript"></script>
</head>
<body>
<input type='hidden' id="flickrpage" name='index' value='1' />
<h2 >Buscar Imagenes</h2>
<input type="text" name="image_search" id="img_srch_txt" />
<button id="img_srch_but" >Buscar</button>
<div >
<span><a href="javascript:searchflickr(-1);">Anterior</a></span>
<span><a href="javascript:searchflickr(1);">Siguiente</a></span>
</div>
<p id="flickr_imgs"></p>
</body>
</html>flickr.js
jQuery(document).ready(function($) {
$('#img_srch_but').click(function(){
$('#flickrpage').attr('value','1');
searchflickr(0);
});
});
function searchflickr(id){
var page = $('#flickrpage').attr('value');
if (parseInt(page)<=1 && id == -1){
alert("Esta en el inicio de la busqueda.");
return;
}
$('#flickr_imgs').html('<div class="loading"><img src="/images/box/loading.gif" alt="Cargando..."/></div>');
page =parseInt(page) + parseInt(id);
$.getJSON("http://api.flickr.com/services/rest/?jsoncallback=?", {
api_key: 'pon aqui tu api key',
method: 'flickr.photos.search',
format: 'json',
per_page: '6',
tag_mode: 'all',
page: page.toString(),
media: 'photos',
sort: 'date-posted-desc',
tags: $('#img_srch_txt').attr('value')
},
function(data){
$('#flickr_imgs').html('');
$.each(data.photos.photo, function(i,item){
var img_url = 'http://farm'+ item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret ;
var img_prev ='<a href="javascript:viewFoto(\''+img_url+'\');"><img src="'+img_url+'_m.jpg" alt="'+item.title+'"></a><br>';
$('#flickr_imgs').append(img_prev);
});
});
$('#flickrpage').attr('value',page);
}Si te gusto este artículo puedes dejar un comentario, también puedes suscribirte al canal RSS de la página o compartir este articulo por facebook
