jQuery e Prototype: librerie in conflitto

Oggi ho finalmente scoperto che cosa mi impediva di utilizzare alcune funzioni di contorno contemporaneamente per abbellire graficamente il blog con effetti molto web duepuntozero. Veniamo al dunque perchè è già tardi e l’acqua è poca e la papera non galleggia.

Come avevo anche scritto tempo fa ogni tanto le foto che inserisco nei post sono visualizzabili tramite effetto Thickbox. Questo script per ingrandimenti e finestre modali AJAX-powered ha il grande pregio di utilizzare una libreria javascript molto leggera che si chiama jQuery ma che permette di ottenere gli stessi effetti che si possono avere con il più famigerato Lightbox che utilizza al contrario diverse librerie molto più pesanti e nello specifico Prototype e Scriptaculous. Così posso avere fantasmagorici effetti web duepuntozero ed contemporaneamente pagine da caricamento più rapido per venire incontro a coloro che non hanno una connessione ad internet a banda larga.

L’altro giorno leggendo un post di Vittorio che a sua volta citava Giovy che a sua volta ringraziava Davidonzo, noto l’uscita di un nuovo plugin per WordPress, Share-This, che permette di nascondere tutte le classiche iconcine che fino a poco tempo fa erano presenti al piè di ogni post dietro l’unica che ora vedete a fianco della scritta condividi.

Se sei un attento lettore del blog ed un assiduo fruitore dei network per il social bookmarking avrai notato che fino a oggi prima delle ore 17 cliccando su quei link venivi reindirizzato ad una nuova pagina da cui potevi poi andare ad inserire il post sul servizio tra quelli a disposizione che più ti era congeniale (lo stesso problema che a quanto pare ha Antonio Sofi). Ora invece noterai che come clicchi sul link ti compare un gradevole popup stile web duepuntozero come sui siti degli amici che ho citato sopra.

Il problema era dovuto al fatto che il mio tema che è una versione customizzata di K2 ed il plugin Share-This hanno bisogno per il loro funzionamento della libreria Prototype che non va proprio d’accordo con jQuery. La soluzione più semplice era rinunciare a Thickbox per Lightbox, però quest’ultimo oltre ad essere più pesante non mi piace neanche molto. Quindi se anche tu hai lo stesso problema di far convivere le due librerie Prototype e jQuery per ora incompatibili l’una con l’altra prendi carta e penna e segnati quanto segue.

Caricando nel seguente ordine i due script e utilizzando il seguente codice:

<script type="text/javascript"  xsrc="jquery.js"></script>
<script type="text/javascript">
JQ = $;  //rename $ function
</script>
<script type="text/javascript" xsrc="prototype.js"></script>

Così facendo ed andando successivamente a sostituire tutte le chiamate alle funzioni messe a disposizione dalla libreria jQuery utilizzando il suffisso JQ al posto del $ come per esempio potete vedere in questo pesso di codice:

<script type="text/javascript">
JQ(document).ready(function(){
JQ("#test_jquery").html("this is jQuery!");
$("test_prototype").innerHTML="this is Prototype!";
});
</script>

e come normalmente avviene, avrete risolto il conflitto e le due librerie potranno coesistere.