Appunti di Matteo

Il relax del sabato pomeriggio (js kung-fu)

Sono passati 5 mesi dal mio ultimo post. Finalmente oggi pomeriggio ho avuto qualche ora da dedicare
ad uno dei miei passatempi preferiti, la programmazione a caso.

Era già da un po’ che volevo sistemare le immagini che prendo gentilmente dal mio flickr e visualizzo
nella colonna di destra in basso nella homepage , volevo visualizzarne l’ingrandimento
in una sorta di lightbox o simile.

In rete ho trovato un plugin simpaticissimo che si chiama colorbox ed ho deciso
di usarlo per visualizzare le immagini fetchate dal feed di flickr via jsonp.

Se non avete idea di cosa ho detto nelle mie ultime 3 parole smettete pure di leggere, questo
non è un tutorial, è solo codice sparso =), usate il “view source”!

La bellezza di usare jquery è che si ha la possibilità di creare dei plugin riutilizzabili senza
pressochè sapere cosa si sta facendo (come nel mio caso), ed in pochissime righe di codice.

Per l’esempio che sto facendo usero’ i feed flickr di 2 miei amici, spero non se la prendano =).

Poniamo di voler prendere le immagini di peppe il codice è il seguente:

  $('#images-container2').flickr_get('30020829@N02')

visualizza immagini di peppe

Poniamo di voler prendere le immagini di andrea che hanno come tag “venice”

  $('#images-container3').flickr_get('8413010@N05', {tag: "venice"});        

visulizza le immagini di andrea taggate con venice

Quì vi incollo il codice del plugin che ho fatto, ovviamente ci sono enormi errori di design,
ma per una sessione di random coding di 2 ore ci si può accontentare!

A presto!

  jQuery.fn.flickr_get = function( flickr_uid , options) {
    // define defaults and override with options, if available
    settings = jQuery.extend({
       flickr_resource_uri: "http://api.flickr.com/services/feeds/photos_public.gne",
       tag: "",
       spinner: "#spinner", 
    }, options);
    
    var images_container = $(this);
    var spinner = settings.spinner;
    
    //load from flickr feed
    $.getJSON(settings.flickr_resource_uri+"?id="+flickr_uid+"&tags=\""+settings.tag+"\"&lang=en-us&format=json&jsoncallback=?", function (data){
       $.each(data.items, function (i,item){
         $("<img/>").attr("src", item.media.m.split('_m.').join('_s.')).appendTo(images_container).wrap("<a title=\""+item.title+"\" rel=\"fl-gallery\" class=\"fl-image\" href='" + item.media.m.split('_m.').join('.') + "'></a>");
         $(spinner).remove();
         images_container.show();
         $("a[rel='fl-gallery']").colorbox();
       });
     });
  }