E’ molto strano, ma non ho trovato nessun script per visualizzare immagini che prevedesse l’integrazione con facebook o con qualsiasi altro social button.
Per evitare di perdere troppo tempo e rischiare di non cavare un ragno dal buco, ho preferito aprire il codice e fare alcune piccole modifiche per integrare a dovere il like button.
Il mio plugin preferito per visualizzare immagini è Lightbox nella sua versione Slim.
Qui potete fare il download di Slimbox 2.04 con Facebook Like Button che ho appena finito di modificare.
Chi invece volesse sapere quali sono state le modifiche effettuate le può trovare qui di seguito. Sono 6 semplici step e penso che possano essere applicati senza troppi cambiamenti a qualsiasi altra versione di slimbox:
1) css/slimbox2.css
Dalla linea 77 alla linea 83 è stata aggiunta la dichiarazione che gestisce lo stile del nuovo div dedicato al social button.
#lbFacebook {
display: inline;
float: right;
height: 22px;
margin: 5px 10px;
outline: none;
}
Il float right in assenza di una dimensione per la larghezza renderà il div invisibile nel caso l’opzione facebook non sia attivata. Il display inline è invece un fix per evitare il raddoppio dei margini con explorer 6 (ma se non volete supportarlo, potete eliminare la proprietà).
2) src/slimbox2.js - linea 22
Si modifica questa linea aggiungendo semplicemente la dichiarazione della variabile facebook. La nuova linea è questa:
overlay, center, image, sizer, prevLink, nextLink, bottomContainer, bottom, caption, facebook, number;
3) src/slimbox2.js - linea 46
Questa volta la linea è da aggiungere, che non fa altro che inserire il div dedicato a facebook nella parte sotto la foto.
facebook = $('<div id="lbFacebook" />')[0],
4) src/slimbox2.js - linea 74
Anche qui si tratta di inserire una nuova linea. E’ necessario solo dichiarare una nuova opzione di configurazione e lasciarla vuota.
facebookContent: ''
N.B da non dimenticare la virgola da aggiungere alla fine della linea precedente.
5) src/slimbox2.js - linea 203
Questa è la ultima aggiunta al file e consiste in un innerHTML tramite jquery del bottone mi piace. Subordinato alla configurazione del loader (vedere punto 6).
if (options.facebookContent) $(facebook).html(options.facebookContent.replace('{url}', images[activeImage][0]));
5) js/slimbox2.js
Questo file contiene la versione minificata del file src/slimbox2.js con in aggiunta il loader, che può essere lasciato in questo file oppure spostato prima della chiusura del tag </body> (cosa che consiglio di fare).
Questa è la versione originale del loader:
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
Mentre questa qui di seguito è la versione modificata. Come potete vedere è stata valorizzata l’opzione facebookContent con l’iframe che serve per visualizzare il Mi piace.
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({facebookContent: '<' + 'iframe src="http://www.facebook.com/plugins/like.php?href={url}&send=false&layout=button_count&width=130&show_faces=false&action=like&colorscheme=light&font&height=21" style="border: medium none; overflow: hidden; width: 130px; height: 21px" allowtransparency="true" frameborder="0" scrolling="no"><' + '/' + 'iframe>'/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
Da notare che al posto dell’url della pagina a cui si vuole fare “like” è necessario sostituire il codice {url}.
E per seconda cosa, visto che si tratta di semplice html, questo like button può essere sostituito con qualsiasi altra cosa. Si può aggiungere qualsiasi altro bottone, basta usare {url} come destinazione nel codice per fare in modo che venga automaticamente aggiornato mentre si sfogliano le foto.
