Cohabitation: lightbox et jquery slider

**Philp974** · 20/07/2010, 21h12

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...

**pablofr** · 20/07/2010, 23h31

Peux tu copier coller ton header html ici ?

**Philp974** · 21/07/2010, 05h08

J'ai fait des tests sur cette page c'est plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>&lt;script type="text/javascript" src="js/prototype.js"&gt;&lt;/script&gt;<br />&lt;script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"&gt;&lt;/script&gt;<br />&lt;script type="text/javascript" src="js/lightbox.js"&gt;&lt;/script&gt;<br /></code></pre>
  </li>
  <li>Include the Lightbox CSS file (or append your active
stylesheet with the Lightbox styles).
    <pre><code>&lt;link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /&gt;<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>&lt;a href="images/image-1.jpg" rel="lightbox" title="my caption"&gt;image #1&lt;/a&gt;<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>&lt;a href="images/image-1.jpg" rel="lightbox[roadtrip]"&gt;image #1&lt;/a&gt;<br />&lt;a href="images/image-2.jpg" rel="lightbox[roadtrip]"&gt;image #2&lt;/a&gt;<br />&lt;a href="images/image-3.jpg" rel="lightbox[roadtrip]"&gt;image #3&lt;/a&gt;<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>

**Bovino** · 21/07/2010, 09h36

http://docs.jquery.com/Using_jQuery_...ther_Libraries

**Philp974** · 21/07/2010, 11h41

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.

**dav2k** · 21/07/2010, 21h41

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é :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#slider').s3Slider({
timeOut: 3000
});
});
</script>

Pour cette méthode il faut inclure la librairie jQuery en première.

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.

Cohabitation: lightbox et jquery slider

jQuery

Vue hybride

Discussions similaires

Partager

Partager