jQuery est très bien foutu, non content de permettre d’utiliser des libs concurrentes utilisant la même API avec noConflict() (c’est beau l’open source quand même), elle permet également d’utiliser en même temps une version plus récente ou plus ancienne de son code, facilitant les migrations.
Pour utiliser noConflict à bon escient, il faut simplement faire très attention à l’ordre d’inclusion de ses scripts…
D’abord, loader les deux versions de jQuery :
<script type="text/javascript" src="version1-de-jquery.js"></script> <script type="text/javascript" src="plugin-qui-utilise-cette-version.js"></script> |
Ensuite utilise noConflict() pour sauvegarder une référence à cette version :
<script type="text/javascript"> var version1dejQuery = $.noConflict(true); </script> |
Et on charge la deuxième fournée :
<script type="text/javascript" src="autre-version-de-jquery.js"></script> <script type="text/javascript" src="plugin-qui-utilise-cette-autre-version.js"></script> |
On sauvegarde aussi cette version dans une variable :
<script type="text/javascript"> var autreVersionDejQuery = $.noConflict(true); </script> |
Et du coup on peut utiliser les deux en parallèle. Au lieu d’appeler $, les appelle par leur p’tit nom :
autreVersionDejQuery('a').click(truc); |
Et comme d’hab, vous pouvez utiliser la technique de la fonction anonyme immédiatement appelée pour créer un alias local et réutiliser $.
(function($) { $('img').hover(bidule); })(version1dejQuery); |
D’ailleurs, je pense que ça ne marche que si les plugins inclus utilisent cette technique, ce qui est normalement une convention dans le monde de jQuery.
Bonsoir,
J’essaye désespérément d’utiliser votre méthode pour faire cohabiter 2 versions de jQuery pour une Fancybox et pour un slider d’images.
Je ne dois pas être bien doué mais quoi que j’essaye un de mes deux javascript (voir les deux ^^) ne fonctionne pas…
Je sais que ça n’est pas très sympa de faire travailler les autres mais là j’avoue que je sèche alors je me permet de vous mettre mon code si jamais vous avez 2 minutes pour jeter un coup d’oeil et m’aider ça serait au top !
Merci d’avance !
Code Fancybox :
jQuery(function(){
jQuery.fn.getTitle = function() { // Copy the title of every IMG tag and add it to its parent A so that fancybox can show titles
var arr = jQuery(“a.fancybox”);
jQuery.each(arr, function() {
var title = jQuery(this).children(“img”).attr(“title”);
jQuery(this).attr(‘title’,title);
})
}
// Supported file extensions
var thumbnails = jQuery(“a:has(img)”).not(“.nolightbox”).filter( function() { return /\.(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr(‘href’)) });
thumbnails.addClass(“fancybox”).attr(“rel”,”fancybox”).getTitle();
jQuery(“a.fancybox”).fancybox({
‘cyclic': false,
‘autoScale': true,
‘padding': 10,
‘opacity': true,
‘speedIn': 500,
‘speedOut': 500,
‘changeSpeed': 300,
‘overlayShow': true,
‘overlayOpacity': “0.3”,
‘overlayColor': “#666666″,
‘titleShow': true,
‘titlePosition': ‘float’,
‘enableEscapeButton': true,
‘showCloseButton': true,
‘showNavArrows': true,
‘hideOnOverlayClick': true,
‘hideOnContentClick': false,
‘width': 560,
‘height': 340,
‘transitionIn': “elastic”,
‘transitionOut': “fade”,
‘centerOnScroll': true
});
})
…
Code Slider :
…
$(function() {
$(‘pre code’).each(function() {
eval($(this).text());
});
});
$('#s1').cycle({ fx: 'scrollHorz', prev: '#prev1', next: '#next1', timeout: 0, rev: true });Les commentaires d’un blog sont un medium mal adapté à ce genre d’échange. Essaye plutôt un forum comme ceux sur developpez.com.
Très bien, merci quand même.
Bonne soirée.