Compatibilité jQuery/Prototype

Version imprimable

21/02/2010, 12h55
Digilougm

Compatibilité jQuery/Prototype

Bonjour,

Je rencontre actuellement un petit problème de compatibilité entre jQuery et Prototype. Débutant dans ce domaine, je m'en remets à vous en espérant que quelqu'un trouvera une réponse à mes questions.

Pour les besoins de mon site, j'essaye de combiner l'utilisation de Lightbox (http://www.huddletogether.com/projects/lightbox2/) basé sur prototype, ainsi que jMyCarousel (http://plugins.jquery.com/project/jMyCarousel) basé quant à lui sur jQuery.

Or, lorsque j'essaye de combiner les deux, seul jMyCarousel se retrouve actif.

Après quelques rapides recherche, j'ai trouvé plusieurs sites proposant une solution pour palier à ces problèmes de compatibilité (http://docs.jquery.com/Using_jQuery_...ther_Libraries par exemple).
Néanmoins, lorsque je teste une des solutions proposées, je me retrouve cette fois-ci avec seulement Lightbox d'actif.

Apparemment, tout repose sur la méthode jQuery.noConflict(), mais étant débutant et ne comprenant pas vraiment l'utilité de cette fonction, je dois probablement mal l'utiliser.

De ce fait, si quelqu'un pouvait m'éclairer sur le problème, je lui serai très reconnaissant.

Merci d'avance.
21/02/2010, 15h07
gui80

Bonjour,

effectivement, il faut appeler noConflict.

Mets ton code ici pour que l'on en discute.

Merci.

Code:

1
2
3
4
5
6
7
<!-- Fichiers nécessaires à Lightbox -->
 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Fichiers nécessaires à jMyCarousel-->
 
<link rel="stylesheet" type="text/css" href="carousel_css/example1.css" />
<script type="text/javascript" src="../jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="../jMyCarousel.js"></script>
<!-- Optional -->
<script type="text/javascript" src="../jquery.mousewheel.js"></script>
<script type="text/javascript">
		$(function() {
		    $(".jMyCarousel").jMyCarousel({
		        visible: '100%'
		    });
		});
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- jMyCarousel -->
 
<div class="jMyCarousel">
    <ul>
        <li><img src="carousel_img/1/1.jpg" width="200" height="150"></li>
 		<li><img src="carousel_img/1/3.jpg" width="200" height="150"></li>
        <li><img src="carousel_img/1/4.jpg" width="200" height="150"></li>
        <li><img src="carousel_img/1/5.jpg" width="200" height="150"></li>
        <li><img src="carousel_img/1/6.jpg" width="200" height="150"></li>
        <li><img src="carousel_img/1/7.jpg" width="200" height="150"></li>
        <li><img src="carousel_img/1/8.jpg" width="200" height="150"></li>
        <li><img src="carousel_img/1/9.jpg" width="200" height="150"></li>
  </ul>
</div>

Code:

1
2
3
4
5
6
 
<!-- Lightbox-->
 
<a href="images/imagsergsere-1.jpg" rel="lightbox[roadtrip]"><img src="images/asdthumba-1.jpg" width="100" height="40" alt="" /></a>
<a href="images/imagsergsere-1.jpg" rel="lightbox[roadtrip]"><img src="images/asdthumba-1.jpg" width="100" height="40" alt="" /></a>
<a href="images/imagsergsere-1.jpg" rel="lightbox[roadtrip]"><img src="images/asdthumba-1.jpg" width="100" height="40" alt="" /></a>

Dans le cas présent, jMyCarousel est actif, mais Lightbox ne l'est pas (le lien me renvoie vers l'image, comme un lien standard).

Comme je l'ai déjà précisé, j'ai tenté plusieurs solutions trouvées notamment sur http://docs.jquery.com/Using_jQuery_...ther_Libraries, en vain.

Attention, il faut lancer ton carousel au chargement du document. Cela marchait jusque là, mais c'est juste un conseil.
Ensuite, dans le code que tu montres, tu n'utilises pas le noConflict. Cette méthode te permet de ne pas avoir de conflit dans les appels des librairies (les $).
Après, tu appelles comment ton js de lightbox ? Seul le CSS suffit ?

Voici ce que je mettrai déjà :
Code:

1 2 3 4 5 6 7 8 9 10 <script type="text/javascript"> var $j = jQuery.noConflict(); $j(document).ready(function(){ $j(".jMyCarousel").jMyCarousel({ visible: '100%' }); }); </script>

Le problème venait justement du carousel qui n'était pas au chargement du document. Du coup, les deux fonctionnent. Merci gui80 ;)

En revanche, je rencontre maintenant un problème d'un autre ordre.

Comme prévu, j'ai combiné les deux galeries pour obtenir à première vue l'effet jMyCarousel, puis au clic l'effet Lightbox.
J'obtiens ainsi le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div class="jMyCarousel"> <ul> <li><a href="carousel_img/1/1.jpg" rel="lightbox[roadtrip]"><img src="carousel_img/1/1.jpg" width="200" height="150"></a></li> <li><a href="carousel_img/1/3.jpg" rel="lightbox[roadtrip]"><img src="carousel_img/1/3.jpg" width="200" height="150"></a></li> <li><a href="carousel_img/1/4.jpg" rel="lightbox[roadtrip]"><img src="carousel_img/1/4.jpg" width="200" height="150"></a></li> <li><a href="carousel_img/1/5.jpg" rel="lightbox[roadtrip]"><img src="carousel_img/1/5.jpg" width="200" height="150"></a></li> <li><a href="carousel_img/1/6.jpg" rel="lightbox[roadtrip]"><img src="carousel_img/1/6.jpg" width="200" height="150"></a></li> <li><a href="carousel_img/1/7.jpg" rel="lightbox[roadtrip]"><img src="carousel_img/1/7.jpg" width="200" height="150"></a></li> <li><a href="carousel_img/1/8.jpg" rel="lightbox[roadtrip]"><img src="carousel_img/1/8.jpg" width="200" height="150"></a></li> </ul> </div>
Avec Lightbox, on retrouve sous l'image une "pagination" de la galerie, sous la forme "image X of totalImage".

http://img191.imageshack.us/img191/5052/lightbox.png

Or, cette numération n'est pas juste et m'affiche trois fois plus d'images qu'il n'y en a réellement.

Dans mon exemple de code ci-dessus, 7 images sont censés composer la galerie. En réalité, toutes ses images sont présentes trois fois dans la galerie avec Lightbox.

Une petite idée ?