Liens dans ma page html se confond avec Jquery ?

**stephane23** · 24/08/2015, 16h38

Bonjour j'ai besoin de votre aide svp....un casse-tête grrrrr

j'ai construit une galerie photo en Jquery et lorsque je test ma page tous les liens de celle-ci ne fonctionne plus...

Voici mon code :

Code html :

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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>blablabla</title>
<script  type="text/javascript" src="js/jquery.js"></script>
<script  type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> 
<link  rel="stylesheet" href="css/jquery.lightbox-0.5.css" type="text/css" media="all" />
<script type="text/javascript">
$(function() {
    // Use this example, or...
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    // This, or...
    $('#gallery a').lightBox(); // Select all links in object with gallery ID
    // This, or...
    $('a.lightbox').lightBox(); // Select all links with lightbox class
    // This, or...
    $('a').lightBox(); // Select all links in the page
    // ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
<link rel="stylesheet" href="moderne.css" type="text/css" media="screen"/>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

Merci de votre aide

Stephane

**danielhagnoul** · 24/08/2015, 21h16

Code HTML ?

**stephane23** · 24/08/2015, 21h43

Envoyé par danielhagnoul

Code HTML ?

Hey toi tu m'aide...bravo champion

**SpaceFrog** · 25/08/2015, 09h24

En parlant de champion ...

Si tu ne nous montres pas ton code html ...

**stephane23** · 25/08/2015, 14h49

lolll... le voici, Je me disait que juste avec le head je pouvais avoir l'aide nécessaire

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cuisine Bois-Briand</title>
<script  type="text/javascript" src="js/jquery.js"></script>
<script  type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> 
<link  rel="stylesheet" href="css/jquery.lightbox-0.5.css" type="text/css" media="all" />
<script type="text/javascript">
$(function() {
    // Use this example, or...
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    // This, or...
    $('#gallery a').lightBox(); // Select all links in object with gallery ID
    // This, or...
    $('a.lightbox').lightBox(); // Select all links with lightbox class
    // This, or...
    $('a').lightBox(); // Select all links in the page
    // ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
<link rel="stylesheet" href="moderne.css" type="text/css" media="screen"/>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
 
<body onload="MM_preloadImages('images/bouton/bouton1hover.png','images/bouton/boutonmateriauxhover.png')">
<div id="conteneur">
<div id="contenu">
<div id="contenuimage"><a href="images/moderne/1.jpg"><img src="images/moderne/small/1.jpg" alt="" width="144" height="116" border="0" /></a> <a href="images/moderne/2.jpg"><img src="images/moderne/small/2.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/3.jpg"><img src="images/moderne/small/3.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/4.jpg"><img src="images/moderne/small/4.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/5.jpg"><img src="images/moderne/small/5.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/6.jpg"><img src="images/moderne/small/6.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/7.jpg"><img src="images/moderne/small/7.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/8.jpg"><img src="images/moderne/small/8.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/9.jpg"><img src="images/moderne/small/9.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/10.jpg"><img src="images/moderne/small/10.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/11.jpg"><img src="images/moderne/small/11.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/12.jpg"><img src="images/moderne/small/12.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/13.jpg"><img src="images/moderne/small/13.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/14.jpg"><img src="images/moderne/small/14.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/15.jpg"><img src="images/moderne/small/15.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/16.jpg"><img src="images/moderne/small/16.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/17.jpg"><img src="images/moderne/small/17.jpg" width="144" height="116" border="0" /></a> <a href="images/moderne/18.jpg"><img src="images/moderne/small/18.jpg" width="144" height="116" border="0" /></a></div>
  <div id="texteameublement"><a href="surmesure.html"><img src="images/bouton/bouton1.png" name="mesure" width="250" height="58" border="0" id="mesure" onmouseover="MM_swapImage('mesure','','images/bouton/bouton1hover.png',1)" onmouseout="MM_swapImgRestore()" /></a><br />
  <a href="nosmateriaux.html"><img src="images/bouton/boutonmateriaux.png" name="materiaux" width="250" height="58" border="0" id="materiaux" onmouseover="MM_swapImage('materiaux','','images/bouton/boutonmateriauxhover.png',1)" onmouseout="MM_swapImgRestore()" /></a> </div>
<div id="commerciale1"> <span class="textslogan"><a href="contemporaine.html" class="lienhaut">- Cuisine
  contemporaine </a></span><br />
  <br />
  <br />
  <br />
  <span class="textslogan"><span class="lienhaut"><a href="vanite.html" class="lienhaut">- Vanité &amp; salle de bain</a></span></span></div>
<div class="textslogan" id="droit">©2015 cuisinebois-briand.com - Tous droits réservés / Conception et réalisation : SB GRAPHIQUE</div>
<div id="adresse"><span class="Titre">POUR NOUS JOINDRE :</span><br />
  <br />
  <span class="adresse1">Ébénisterie Bois-Briand<br />1965 rue Charbonneau  Trois-Rivières, QC  G9A5C9<br />
  <br />Bureau : 819-840-6906<br />
Télécopieur : 819-840-5560<br />
Couriel :</span> <span class="adresse1"><a href="mailto:info@cuisinebois-briand.com">info@cuisinebois-briand.com</a><br />
<br />
NOS HEURES OUVERTURE :<br />Du lundi au jeudi de 7h30 à 5h<br />
Vendredi de 7h30 à 12h<br />
Rendez-vous de soir sur demande.
 
<br />
<br />
Venez discuter avec nous sur Facebook :)</span><br />
<br />
<span class="adresse1">Numéro RBQ : 5582-1870-01 </span></div>
<div id="mapgoogle"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2755.4663025372956!2d-72.60132550000003!3d46.32043579999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc7cf10ec7ef50d%3A0xf97e066b40a6f6!2s1965+Rue+Charbonneau%2C+Trois-Rivi%C3%A8res%2C+QC+G9A+5C9!5e0!3m2!1sfr!2sca!4v1439311518595" width="450" height="333" frameborder="0" style="border:0" allowfullscreen></iframe></div>
<div id="contenu1"><span class="textegenerale"><span class="Titre">Cuisine moderne adapté à vos besoins...</span><br />
  <br />
  <br />
  Une cuisine moderne ne doit <br />
  pas être confondue avec une <br />
  cuisine   contemporaine ou <br />
  design. Bien que les différences <br />
  soient minces et que   ces styles <br />
  soient proches, il existe des <br />
  nuances.<br />
  <br />
</span><span class="font4">La surface des meubles, des <br />
  portes, les poignées et boutons.<br />
  tout est personnalisable avec <br />
  une cuisine moderne.</span><br />
  <span class="textegenerale"><br />
  <a href="nosmateriaux.html">Voir nos matériaux </a></span><br />
  <br />
  <span class="textegenerale">Votre cuisine moderne et ses <br />
  composants sont parfaitement <br />
  adaptés à vos   besoins. <br />
  Pour prendre le moins de place possible, pour rester en   harmonie avec la décoration, pour se déplacer facilement... Tout est   possible. </span></div>
<div id="slogan"><span class="textelogo">Ébénisterie Bois-Briand | 819-840-6906</span><br />
  <span class="textslogan">Réalisation, fabrication et installation de cuisine, de salle de bain et de meuble sur mesure.</span></div>
<div id="logofacebook"><a href="https://www.facebook.com/pages/%C3%89benisterie-Bois-Briand/221796081310722?fref=ts" target="_blank"><img src="images/face.jpg" width="135" height="49" border="0" /></a></div>
<div id="menu">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">Accueil</a>      </li>
    <li><a href="#" class="MenuBarItemSubmenu">R&eacute;sidentiel</a>
      <ul>
        <li><a href="#">Cuisine</a></li>
        <li><a href="#">Vanit&eacute; &amp; salle de bain</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Commerciale</a>
      <ul>
        <li><a href="#">Cuisine</a></li>
        <li><a href="#">Vanit&eacute; &amp; salle de bain</a></li>
      </ul>
    </li>
    <li><a href="#">Contemporain</a></li>
    <li><a href="moderne.html">Moderne</a></li>
    <li><a href="#">Classique</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Voici mon code CSS :

Code css :

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
162
163
164
@charset "utf-8";
/* CSS Document */
 
html { 
  margin:0;
  padding:0;
  background: url(images/bg.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}
#conteneur {
	margin-left: -475px;
	position: absolute;
	left: 50%;
}
 
#contenu {
	height: 1982px;
	width: 950px;
	background-image: url(images/fond_moderne.png);
}
.textslogan {
	font-family: Arial, Helvetica, sans-serif;
}
.textelogo {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 24px;
	font-weight: normal;
	color: #000;
}
.textegenerale {
	font-family: Tahoma, Geneva, sans-serif;
}
 
 
 
#animationcadre {
	height: 417px;
	width: 947px;
	position:absolute;
	left: 0px;
	top: 63px;
}
 
#menu {
	height: 42px;
	width: 943px;
	position:absolute;
	left: 4px;
	top: 487px;
}
#logofacebook {
	height: 56px;
	width: 147px;
	position:absolute;
	left: 796px;
	top: 4px;
}
#slogan {
	height: 53px;
	width: 724px;
	position:absolute;
	left: 9px;
	top: 6px;
}
#contenu1 {
	height: 478px;
	width: 442px;
	position:absolute;
	left: 35px;
	top: 568px;
}
#contenuimage {
	height: 929px;
	width: 448px;
	position:absolute;
	left: 491px;
	top: 570px;
}
#commerciale1 {
	height: 116px;
	width: 189px;
	position:absolute;
	left: 738px;
	top: 329px;
}
.lienhaut {
	color: #333;
	text-decoration: none;
}
#conteneur #contenu #commerciale1 .textslogan .lienhaut:hover {
	color: #F00;
}
.font4 {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #0033FF;
}
 
 
#residentiel {
	height: 21px;
	width: 88px;
	position:absolute;
	left: 345px;
	top: 1442px;
}
#texteameublement {
	height: 129px;
	width: 258px;
	position:absolute;
	left: 210px;
	top: 1077px;
}
#formulaire {
	height: 374px;
	width: 320px;
	position:absolute;
	left: 549px;
	top: 1079px;
}
#mapgoogle {
	height: 300px;
	width: 400px;
	position:absolute;
	left: 27px;
	top: 1535px;
}
#adresse {
	height: 359px;
	width: 387px;
	position:absolute;
	left: 544px;
	top: 1535px;
	text-align: right;
}
#droit {
	height: 40px;
	width: 703px;
	position:absolute;
	left: 146px;
	top: 1945px;
}
.Titre {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 24px;
	color: #FFF;
}
.adresse1 {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	color: #FFF;
}
#conteneur #contenu #adresse .adresse1 a {
	color: #FFF;
}
#conteneur #contenu #formulaire #form1 p label {
	font-family: Architekt;
	color: #FFF;
	font-size: 18px;
}

merci de votre aide et désolé

c'etait moi le champion loll

**SpaceFrog** · 25/08/2015, 17h07

quand tu initialises le lightbox ...

Code :

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

$('a[@rel*=lightbox]').lightBox();

aucun lien de ta page n'a de rel contenant lightbox ...

Code :

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

 $('#gallery a').lightBox()

aucun conteneur n'a pour id gallery

Code :

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

$('a.lightbox').lightBox();

aucun a n'a pour classe lightbox

C'est donc que tu applique le lightbox à tous les liens

Code :

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

 $('a').lightBox();

mais ils ont tous # en href ?
vers quoi doivent ils pointer?

**stephane23** · 25/08/2015, 17h40

mon menu n'a pas pas les lien encore mais j'en est quelques-un qui ont des liens..je vais les mettres sous peu...

Donc si je comprend bien ; J'ai créé un Id = gallery
ensuite je dois mettre un rel lightbox mais à quel endroit dans mon code ?
Quand tu me dit : aucun a n'a pour classe lightbox et bien je procède comment ?

Merci

**stephane23** · 25/08/2015, 18h24

Problème résolu....dans le fond j'ai seulement enlevé ceci : $('a.lightbox').lightBox(); dans mon head et bien voilà tout est ok...j,aurais bien aimé que tu me dise cela mais je l'est trouvé par moi-même...merci quand même.

**SpaceFrog** · 26/08/2015, 08h19

ensuite je dois mettre un rel lightbox mais à quel endroit dans mon code ?
Quand tu me dit : aucun a n'a pour classe lightbox et bien je procède comment ?

Sérieusement il te manque les bases :

comment mettre une classe sur un element ...

Code :

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

<a class="myclass" ...

comment mettre un rel sur un élément

Code :

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

<a rel="myrel" ...

Et je ne vois pas en quoi le fait d'enlever

j'ai seulement enlevé ceci : $('a.lightbox').lightBox();

du head peut solutionner ton problème, c'est un coup de chance et le souci n'est sasn doute pas là, c'est l'arbre qui cache la foret.

En gros tu essaye de mettre ne place un plugin JQuery au petit bonheur la chance sans comprendre ce que tu fais...
Certes, "ça marche" comme tu dis, ton plugin fonctionne mais avec une implémentation douteuse.
Il aurait été préférable de comprendre comment l'initialiser avec les bons sélecteurs, plutôt que de laisser du code inutile qui risque de poser problème pour la suite de ton développement.

Liens dans ma page html se confond avec Jquery ?

jQuery

Discussions similaires

Partager

Partager