Hello, impossible de faire cohabité ces deux (system) sur une même page, le slider fonctionne mais le lightbox ne fonctionne plus, j'ai essayer de mettre les scrip dans des dossiers différents mais c'est toujours pareil, si quelqu'un a une idée...
Version imprimable
Hello, impossible de faire cohabité ces deux (system) sur une même page, le slider fonctionne mais le lightbox ne fonctionne plus, j'ai essayer de mettre les scrip dans des dossiers différents mais c'est toujours pareil, si quelqu'un a une idée...
Peux tu copier coller ton header html ici ?
J'ai fait des tests sur cette page c'est plus simple :
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Lightbox JS v2.0 | Test Page</title> <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> <style type="text/css"> body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; } </style> <style type="text/css" media="screen"> #slider { width: 410px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #sliderContent { width: 410px; /* important to be same as image width or wider */ position: absolute; top: 0; margin-left: 0; } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 384px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear: both; } .sliderImage span strong { font-size: 14px; } .top { top: 0; left: 0; } .bottom { bottom: 0; left: 0; } ul { list-style-type: none;} </style> </head> <body> <h1><a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox JS <em>v2.04</em></a></h1> <p><a href="http://www.lokeshdhakar.com">by Lokesh Dhakar</a></p> <h2>Example</h2> <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" alt="" height="40" width="100" /></a> <h2>How to Use:</h2> <h3>Part 1 - Setup</h3> <ol> <li>Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header. <pre><code><script type="text/javascript" src="js/prototype.js"></script><br /><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><br /><script type="text/javascript" src="js/lightbox.js"></script><br /></code></pre> </li> <li>Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). <pre><code><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><br /></code></pre> </li> <li>Check the CSS and make sure the referenced <code>prevlabel.gif</code> and <code>nextlabel.gif</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>closelabel.gif</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li> </ol> <h3>Part 2 - Activate</h3> <ol> <li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate the lightbox. For example: <pre><code><a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a><br /></code></pre> <em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption. </li> <li>If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example: <pre><code><a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a><br /><a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a><br /><a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a><br /></code></pre> No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li> </ol> <br /> <br /> <br /> <table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td> <!-- JavaScripts--> <script type="text/javascript" src="le/js2/j.js"></script> <script type="text/javascript" src="le/js2/s.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); }); </script> <h2>Example 1</h2> <p>This show the layer appears from top or bottom.</p> <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <a href=""><img src="imagesjq/410/1.jpg" alt="1" /></a> <span class="top"><strong>Title text 1</strong><br /> Content text...</span> </li> <li class="sliderImage"> <a href=""><img src="imagesjq/410/2.jpg" alt="2" /></a> <span class="top"><strong>Title text 2</strong><br /> Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span> </li> <li class="sliderImage"> <img src="imagesjq/410/3.jpg" alt="3" /> <span class="bottom"><strong>Title text 2</strong><br /> Content text...</span> </li> <li class="sliderImage"> <img src="imagesjq/410/4.jpg" alt="4" /> <span class="bottom"><strong>Title text 2</strong><br /> Content text...</span> </li> <li class="sliderImage"> <img src="imagesjq/410/5.jpg" alt="5" /> <span class="top"><strong>Title text 2</strong><br /> Content text...</span> </li> <div class="clear sliderImage"></div> </ul> </div> </td> </tr> </tbody> </table> </body> </html>
Merci pour ta réponse, si j'ai bien compris faudrait remplacer la "$" par jsquerynoconflit mais je ne comprend pas la totalité de la procédure à suivre, merci de m'éclairer.
Salut Philp974,
J'ai déjà eu un problème de conflits entre prototype et jQuery et j'ai trouvé une solution qui fonctionne sur le site de jquery.
Il faut appeler la librairie jQuery à chaque fonction qui l'utilise.
Dans ton cas par exemple ça aurait donné :
Pour cette méthode il faut inclure la librairie jQuery en première.Code:
1
2
3
4
5
6
7
8 <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#slider').s3Slider({ timeOut: 3000 }); }); </script>
Il existe une solution alternative qui consiste à créer une variable avec la méthode jQuery.noConflict(); , il parait que c'est le plus optimisé.
Pour cette autre méthode, il faut inclure la librairie jQuery en dernière.
Je te laisse regarder par ici.
Merci pour ta réponse Dav2k même en remplaçant les "$" par "jQuery" le problème persiste, d'autres pistes?
Tu as bien chargé jQuery en premier (avant prototype) sur ta page ?
As tu aussi modifié toutes les requêtes faisant appel à jQuery ?Code:
1
2
3
4
5
6
7
8
9
10
11 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Lightbox JS v2.0 | Test Page</title> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <!-- Placer jQuery ici ! --> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
Hello, Jquery est chargé en premier, Jquery est appelé uniquement en deux fois sur la page de test que j'ai joint ben non sa ne marche toujours pas...Je sais vraiment pas ou est le problème :roll:
Je ne connais pas les plugins que tu utilises dans ta page, je peux simplement te dire que si tu veux faire cohabiter 2 plugins utilisant des librairies différentes (jQuery et prototype en l'occurrence), la technique communiquée plus haut fonctionne, que ce soit avec jQuery.noConflict ou en remplaçant les $ par jQuery (uniquement dans les fonctions des plugins l'utilisant...)
Yes yes yes sa marche, je suis un gros blaireau, j'avais déplacer la bibli+le script forcement sa ne marchait pas!! Mille merci à toi dav2k pour ton aide, pour ce qui sa intéresse si vous voulez jeté un oeil c'est par ici : http://www.image-reunion.re/
P.S: J'ai encore un petit soucis au niveau lightbox, quand j'ouvre une photo le titre apparait sous sur la page au dessous de "Une photo". je vais ouvrir un autre post pour ça, encore merci.