jQuery: integrazione Fancybox & Tooltip

Questo post tratta l'integrazione di due ottimi plugin jQuery:

• Fancybox – un clone di Lightbox dall'interfaccia più accattivante e con alcune funzioni ben implementate,
• Tooltip – un plugin molto versatile per customizzare i tooltip che normalmente si hanno in base all'attributo title dei tag <a>

Questi due plugin si suppongono quindi già installati e configurati.

Lo scopo di questo hack è quello di avere una galleria Fancybox con i titoli delle immagini che possono ospitare link e che mostrano un "tooltip": è quello che ho fatto per la galleria di graphic design su Nâda-Design, in cui alcune immagini hanno un link verso la relativa pagina dell'account deviantArt.
Per far capire all'utente che il link punta verso una pagina deviantART ho inserito un tooltip che mostra il logo della community.

Il fine è quello di poter inserire dell'HTML nel titolo mostrato da Fancybox, e potervi così collegare un link e un tooltip, e nel contempo far anche validare la pagina come XHTML Strict!

1. Inserimento del link nel titolo dell'immagine

Il titolo dell'immagine nella galleria Fancybox è estratto dall'attributo title del link che lancia l'immagine stessa: poiché title supporta come valore una stringa di testo generica, è possibile, in linea di principio, inserirvi dell'HTML (avendo ovviamente cura di sostituire tutti i caratteri speciali con le relative entità), ad esempio:

<a href="#img1.jpg" rel="[fancybox]" title="&lt;a href=&quot;link_esterno&quot; target=&quot;_blank&quot; title=&quot;titolo&quot;&gt;testo_link&lt;/a&gt;&quot;&gt;&lt;img /&gt;</a>

In pratica si è inserito un altro tag <a> completo all'interno dell'attributo title.

Il problema di questo procedimento è che il browser interpreterà comunque l'attributo, e visualizzerà il suo tooltip predefinito con tutti i dati che vi abbiamo inserito... con un effetto particolarmente disdicevole!

Ma poiché questa è una funzione non disattivabile esternamente, non ci rimane altro da fare che abbandonare l'attributo title, e sceglierne un altro: e questa decisione, ovviamente, ci complicherà enormemente la vita...

Non possiamo scegliere l'attributo id, perché supporta solo valori univoci senza caratteri speciali. Scegliamo dunque l'attributo rev: esso, da definizione W3Schools, "specifica la relazione esistente tra il documento linkato e il documento corrente".

Ma le caratteristiche che ce lo fanno scegliere sono essenzialmente due:

1. Può contenere una stringa di testo,
2. Non è interpretato da nessuno dei browser principali.

Questo vuol dire che possiamo inserirci tutto quello che vogliamo senza che i browser se ne accorgano, e mantenendo la validazione della pagina.
Comunque anche se il documento valida, non si può certo parlare di contenuto aderente agli standard!

Quindi alla fine un mio tag <a> avrà quest'aspetto:

<a rel="[fancybox]" rev="&lt;a href=&quot;http://blacktealover.deviantart.com/art/Reincarnation-118622078&quot; target=&quot;_blank&quot; title=&quot;.&quot;&gt;reincarnation&lt;/a&gt;" title="reincarnation" href="images/graphics/large/reincarnation.gif"><img src="images/graphics/reincarnation.gif" alt="reincarnation" width="160" height="80"/></a>

Il title del link "aggiuntivo" deve essere non vuoto se vogliamo che il tooltip venga mostrato.

2. Hack di Fancybox
A questo punto si deve andare a modificare il codice di Fancybox per fargli prendere l'attributo rev invece del title come fa normalmente.

Le modifiche sono semplicissime: ci interessa soltanto la sezione di codice dalla linea 60 alla 97 del file jquery.fancybox-1.2.1.js; in particolare andiamo a sostituire la riga 63:

var item = {href: elem.href, title: elem.title};

con il seguente codice:

if ($(elem).attr("rev")){
 var item = {href: elem.href, title: elem.rev};
} else {
 var item = {href: elem.href, title: elem.title};
}

e la linea che originariamente era la 78

item = {href: subGroup[i].href, title: subGroup[i].title};

con questo:

if ($(subGroup[i]).attr("rev")){
 item = {href: subGroup[i].href, title: subGroup[i].rev};
} else {
 item = {href: subGroup[i].href, title: subGroup[i].title};
}

Le due sezioni di codice sono rispettivamente per un'immagine singola e per un gruppo d'immagini.

Ho inserito il check sull'esistenza dell'attributo rev perché così nel caso si decida di non inserire nulla di aggiuntivo nel titolo dell'immagine, Fancybox si comporta come di consueto, andando a pescare il contenuto del title. In questo modo non ci bruciamo la terra dietro le spalle.

Affinché il link funzioni è necessario disabilitare l'opzione hideOnContentClick (che si trova nella lista delle funzioni, in fondo al file dello script) settandola su false.

Adesso, per completare questa prima parte dedicata a Fancybox, basta andare a stilare il nostro link, con del CSS.
Il selettore che ci interessa per andare a colpire il link nel titolo dell'immagine è #fancy_title; ad esempio:

#fancy_title a{
 color: #f9c587;
 text-decoration: none;
}
#fancy_title a:hover{
 color: #fad5a7;
 text-decoration: underline;
}

3. Inserimento del tooltip
Per richiamare un tooltip sul link appena inserito, il modo migliore è usare la funzione di callback di Fancybox.

In fondo al file di Fancybox, jquery.fancybox-1.2.1.js, andiamo ad inserire la funzione che genererà il tooltip, e che chiameremo semplicemente "fancyboxCallback".
Andiamo a dichiararla nell'opzione di callback:

callbackOnShow : tooltipCallback,

e poi, subito sotto, la definiamo:

function tooltipCallback(){
  $('#fancy_title a').tooltip({
   track: true,
   delay: 0,
   fade: 50,
   showURL: false,
   fixPNG: true,
   extraClass: "datip",
   bodyHandler: function() {
    return $("").attr({
     src: "balloon_da.png",
     width: "30",
     height: "33"
    });
   },
   top: -40,
   left: 0
  });
 };

La riga 2 definisce l'elemento su cui creiamo questo tooltip; degli attributi è importante la extraClass, che useremo dopo per assegnare delle proprietà fondamentali, e la funzione passata tramite bodyHandler. È con questo parametro che si può iniettare nel tooltip dell'HTML qualsiasi: in questo caso si riempie il blocco con una immagine.

Nel mio caso, infatti, non voglio che il tooltip visualizzi il testo del title del mio link, ma un'unica immagine (sempre la stessa per questa galleria) che rappresenta il logo di deviantART. Negli attributi che passo al tag <img /> c'è l'immagine precedentemente creata (+ le sue dimensioni).

Per finire, andiamo a sviluppare la classe dedicata, datip: essa si inserisce nel file jquery.tooltip.css e nel mio caso è:

#tooltip.datip{
 background: 0;
 width: 30px; height: 33px;
 padding: 0;
}
#tooltip.datip img{
 position: absolute;
 top: 0; left: 0;
}

La prima parte del codice CSS elimina l'eventuale sfondo presente del tooltip generico della pagina e setta le dimensioni esatte dell'immagine che verrà inserita nel blocco.
La seconda parte riguarda il contenuto del tooltip, che in questo caso è un'immagine, e serve per ottenere un posizionamento perfetto.

È ovvio, data la versatilità di Tooltip e il modo generico in cui abbiamo modificato Fancybox, che in linea di principio è possibile sbizzarrirsi inserendo nel titolo dell'immagine dell'HTML vario e mostrare tooltip con di tutto di più; ad esempio una didascalia estesa con molto testo e/o immagini, o altro.

Come al solito, il limite sono la fantasia e l'estro di ciascuno.