Integrar Flickr en mi pagina web

jonh_doe · #1 (**permalink**) 12/08/2013, 03:35

Hola buenas,
estoy intentando integrar una galería de Flickr en mi página web siguiendo un tutorial. El tutorial es algo antiguo y no me funciona muy bien, quería saber si ustedes saben algo sobre el tema y si me pueden ayudar. Utilizo un framework de javascript llamado jflickrfeed que utiliza jQuery y es muy sencillo. El problema es que en teoría me debería cargar 20 fotos, pero solo me carga 2. Espero que puedan ayudarme. Un saludo y gracias de antemano.
Les pongo el código a continuación....

HTML

Código HTML:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jflickrfeed.js"></script>

<script type="text/javascript">
$(document).ready(function(){
		$('#marco').jflickrfeed({
			limit: 5,
			qstrings: {
				id: '97906788@N05'
			},

				itemTemplate: '<li><a href="{{link}}" target="_blank"><img src="{{image_s}}" alt="{{title}}" /></a></li>'
                   });
});
</script>

</head>
<body>

<div id="container">
<h1>Ejemplo basico: Flickr Feed + jQuery</h1>
Este es un ejemplo muy básico de utilización del plugin jFlickrFeed.
<div id="marco" class="thumbs"></div>
</div>


</body>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
background: #ccc;
text-align: center;
font-family: arial; }

#container {
width: 550px;
padding: 30px;
background: #f9f9f9;
margin: 10px auto;
text-align: left; }

.thumbs {
margin: 0;
padding: 0;
overflow: hidden; }

.thumbs li {
list-style: none;
float: left;
margin: 5px;
padding: 3px;
background: #eee;

-moz-box-shadow: 0 0 4px #444;
-webkit-box-shadow: 0 0 2px #000; }

.thumbs li a img:hover {
-moz-box-shadow: 0 0 4px green;
-webkit-box-shadow: 0 0 2px green; }

.thumbs li img { display: block; }

.thumbs li a img { border: none;}
</style>
</html>

El javaScript

Código:

(function($) {
	$.fn.jflickrfeed = function(settings, callback) {
		settings = $.extend(true, {
			flickrbase: 'http://api.flickr.com/services/feeds/',
			feedapi: 'photos_public.gne',
			limit: 20,
			qstrings: {
				lang: 'en',
				format: 'json',
				jsoncallback: '?'
			},
			cleanDescription: true,
			useTemplate: true,
			itemTemplate: '',
			itemCallback: function(){}
		}, settings);

		var url = settings.flickrbase + settings.feedapi + '?';
		var first = true;

		for(var key in settings.qstrings){
			if(!first)
				url += '&';
			url += key + '=' + settings.qstrings[key];
			first = false;
		}

		return $(this).each(function(){
			var $container = $(this);
			var container = this;
			$.getJSON(url, function(data){
				$.each(data.items, function(i,item){
					if(i < settings.limit){
					
						// Clean out the Flickr Description
						if(settings.cleanDescription){
							var regex = /<p>(.*?)<\/p>/g;
							var input = item.description;
							if(regex.test(input)) {
								item.description = input.match(regex)[2]
								if(item.description!=undefined)
									item.description = item.description.replace('<p>','').replace('</p>','');
							}
						}
						
						// Add Image Sizes
						// http://www.flickr.com/services/api/misc.urls.html
						item['image_s'] = item.media.m.replace('_m', '_s');
						item['image_t'] = item.media.m.replace('_m', '_t');
						item['image_m'] = item.media.m.replace('_m', '_m');
						item['image'] = item.media.m.replace('_m', '');
						item['image_b'] = item.media.m.replace('_m', '_b');
						delete item.media;
						
						// Use Template
						if(settings.useTemplate){
							var template = settings.itemTemplate;
							for(var key in item){
								var rgx = new RegExp('{{' + key + '}}', 'g');
								template = template.replace(rgx, item[key]);
							}
							$container.append(template)
						}
						
						//itemCallback
						settings.itemCallback.call(container, item);
					}
				});
				if($.isFunction(callback)){
					callback.call(container, data);
				}
			});
		});
	}
})(jQuery);