Galerie photo et des nouveaux li et ul
Bonjour à tous,
Je me lance peu à peu avec JavaScript pour mon site, je pensais avoir tout gagné tout compris.
Mes pages (html), js et css fonctionnent très bien lorsque mon html ne contient que très peu de choses. Une fois que je commence à remplir ma page badabim badaboum, plus rien ne va. Je sais que ça doit être une faute bête, de novices...
Ceux qui souhaitent m'aider sont les bienvenus parce que là je sèche (même si je continue d'essayer de trouver où est la bêtise que j'ai faite).
Le but de mon JS & HTML est de faire une petite galerie photo qui bouge grâce à des sélecteurs (suivant et précédent). Voici mon code js :
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
| var next = function (element, nodeName) {
if(element.nextSibling){
if(element.nextSibling.nodeName === nodeName) {
return element.nextSibling;
} else {
return next(element.nextSibling, nodeName);
}
}
};
var previous = function (element, nodeName) {
if(element.previousSibling){
if(element.previousSibling.nodeName === nodeName) {
return element.previousSibling;
} else {
return previous(element.previousSibling, nodeName);
}
}
};
window.addEventListener("load", function () {
var photo = document.querySelector('#photo'),
prec = document.querySelector("#precedent"),
suiv = document.querySelector("#suivant"),
li = document.querySelector('li');
li.querySelector('img').style.height = '130px';
suiv.addEventListener("click", function () {
li.querySelector('img').style.height = '';
li = next(li, 'LI') || li;
li.querySelector('img').style.height = '130px';
// récupére l'url du href de l'ancre de l'image
photo.src = li.querySelector("a").getAttribute("href");
}, false);
prec.addEventListener("click", function () {
li.querySelector('img').style.height = '';
li = previous(li, 'LI') || li;
li.querySelector('img').style.height = '130px';
// récupére l'url du href de l'ancre de l'image
photo.src = li.querySelector("a").getAttribute("href");
}, false);
}, false); |
Ce code fonctionne si ma page html ne contient rien d'autre que mon diapo de photo :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id='diapo'>
<div ><img id="photo" src="images/grande/salon.jpg" alt="image" /></div>
<div>
<div id="precedent"><img src="images/prec.gif" alt="precedent" /></div>
<ul>
<li><a href="images/grande/salon.jpg"><img src="images/petite/salon.jpg" alt="Title #0" /></a></li>
<li><a href="images/grande/chambre1.jpg"><img src="images/petite/chambre1.jpg" alt="Title #0" /></a></li>
<li><a href="images/grande/chambre2.jpg"><img src="images/petite/chambre2.jpg" alt="Title #0" /></a></li>
<li><a href="images/grande/chambre3.jpg"><img src="images/petite/chambre3.jpg" alt="Title #0" /></a></li>
<li><a href="images/grande/cuisine.jpg"><img src="images/petite/cuisine.jpg" alt="Title #0" /></a></li>
</ul>
<div id="suivant"><img src="images/suiv.gif" alt="suivant" /></div>
</div>
</div> |
Si je rajoute des listes li, par exemple dans mon menu, ça ne fonctionne plus et la console JS m'indique :
Citation:
Uncaught TypeError: Cannot read property 'style' of null
(qui renvoie à = li.querySelector('img').style.height = '130px'; ).
Si une bonne âme charitable pourrait m'élever au rang de maître de la galerie en m'aidant, je serai extrêmement reconnaissante ! Si par moi même je trouve ma bourde, je me flagelle pendant tout le mois.
Merci, et désolée si mon code vous semble dégueulasse.
Bonne journée à tous. :calim2:
