Cum sa inserezi un album Flickr cu ajutorul jquery

Flickr + jQuery

M-am lovit de problema asta recent si mi-a luat ceva timp sa gasesc un script care sa faca treaba asta. Cele mai multe plugin-uri pentru jQuery pe care le-am gasit imi cereau cheia de programator (api key, developer key s.a.m.d.) si, in plus, erau depasite si nu mai functionau. In final am gasit o metoda de a insera in pagina web (HTML) un album Flickr cu ajutorul unui script java jQuery fara a fi nevoie de cheia api.
Exemplul este mai jos:

<script type="text/javascript">
(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-us',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){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>','');}}
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;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)}
settings.itemCallback.call(container,item);}});if($.isFunction(callback)){callback.call(container,data);}});});}})(jQuery);
$(document).ready(function(){
$('#basicuse').jflickrfeed({
limit: 9,
qstrings:{
id: '36774141@N07'
},
itemTemplate: '<li style="list-style: none; float: left; margin: 5px; padding: 3px; background: #eee; -moz-box-shadow: 0 0 4px #444; -webkit-box-shadow: 0 0 2px #ddd;"><a href="{{image_b}}" target="_blank" title="Photo"><img width="75" height"75" src="{{image_s}}" alt="{{title}}" style="display: block;"/></a></li>'
})
})
</script><ul id="basicuse" style="margin: 0; padding: 0; overflow: hidden;"></ul>

Aveti nevoie de libraria jQuery si va sugerez s-o folositi pe cea gazduita de Google sau de situl jQuery, pentru a salva banda contului dvs de gazduire web si a incarca pagina mai rapid. Exemplu:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>

Asadar, basicuse este id-ul elementului care va afisa/integra pozele de pe Flickr - in acest caz este un UL iar pozele sunt incapsulate in elemente LI. Limita pozelor este data de limit (vezi linia limit: 9,), in cazul de mai sus scriptul va afisa doar 9 poze. Doua linii de cod mai jos veti insera id-ul de Flick al dvs, sau id-ul oricarui alt uilizator Flickr ale carui poze doriti sa le afisati.
Un exemplu puteti gasi aici.