Incompatibilité jQuery & Mootools
Bonjour,
j'ai un problème d'incompatibilité entre jQuery et Mootools...
En effet, lorsque j'exécute le code suivant (avec jquery) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js"></script>
<script type="text/javascript">
function GrowEffect(elem)
{
var oElem = document.getElementById(elem) || elem;
Effect.Grow(oElem,{duration:0.4,fps:25,direction:center,from:0.0,to:1.0});
}
</script>
</head>
<body onload="Effect.Grow($('corpus1'));">
<div id="corpus_container">
<div id="corpus1" style="display:none;">
<div id="corpus_content">
<a href="http://www.casimages.com/img.php?i=110412021409181346.jpg" target="_blank" title="upload image"><img src="http://nsa26.casimages.com/img/2011/04/12/mini_110412021409181346.jpg" border="0" alt="Hebergement gratuit d'image et photo"/></a></a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
</div>
</div>
</div>
</body>
</html> |
Pas de problème.
Aussi, lorsque j'exécute celui-là avec mootools :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slideshow Test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/slideshow.css">
<script src="javascripts/mootools-1.3.1-core.js"></script>
<script src="javascripts/mootools-1.3.1.1-more.js"></script>
<script src="javascripts/slideshow.js"></script>
<script>
window.addEvent('domready', function(){
var data = { '1.jpg': { caption: '' }, '2.jpg': { caption: '' }, '3.jpg': { caption: '' }, '4.jpg': { caption: '' }};
new Slideshow('noOverlap', data, { height: 300, hu: 'images/', overlap: false, resize: 'fit', width: 400 });
});
</script>
</head>
<body>
<div id="noOverlap" class="slideshow">
<img src="images/1.jpg" alt="1">
</div>
</body>
</html> |
Pas de problème non plus.
Par contre, lorsque je souhaite assembler les deux... jquery/mootools :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slideshow Test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/slideshow.css">
<script src="javascripts/mootools-1.3.1-core.js"></script>
<script src="javascripts/mootools-1.3.1.1-more.js"></script>
<script src="javascripts/slideshow.js"></script>
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js"></script>
<script>
window.addEvent('domready', function(){
var data = { '1.jpg': { caption: '' }, '2.jpg': { caption: '' }, '3.jpg': { caption: '' }, '4.jpg': { caption: '' }};
new Slideshow('noOverlap', data, { height: 300, hu: 'images/', overlap: false, resize: 'fit', width: 400 });
});
</script>
<script type="text/javascript">
function GrowEffect(elem)
{
var oElem = document.getElementById(elem) || elem;
Effect.Grow(oElem,{duration:0.4,fps:25,direction:center,from:0.0,to:1.0});
}
</script>
</head>
<body>
<body onload="Effect.Grow($('corpus1'));">
<div id="corpus_container">
<div id="noOverlap" class="slideshow">
<img src="images/1.jpg" alt="1">
</div>
<div id="corpus1" style="display:none;">
<div id="corpus_content">
</div>
</div>
</div>
</body>
</html> |
Là, plus rien ne fonctionne...
Je me suis penché sur la question toute la soirée, apparemment, il y a un "problème d'incompatibilité" entre les différentes librairies JS...
Alors, j'ai vu que certains initialisaient les variables de jQuery à $j au lieu de $ pour que $ ne soit pas interprété par les deux librairies mais que par mootools, mais... j'ai essayé, et cela n'a pas fonctionné...
Une idée ???
Merci.
