Bonjour à tous,
J'essai d'utiliser la galerie photo : https://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html.
Idéalement j'aimerais 8 ou 10 galerie photos sur la même pages. Pour commencer j'ai déjà créer 2 galeries côte à côte. La première ne marche pas alors que la deuxième marche.
Le problème : lorsque je clique sur une miniature, la photo ne s'affiche pas en grand dans la fenêtre comme ce doit être le cas mais elle s'ouvre à la place de la page !
Voici mon code dans le "<head>" :
Voici mon code dans le "<body>" :
Voici mon code script.js :
Voici mon code script2.js :
Merci de votre aide
Modifié par KennyFal (28 Mar 2020 - 17:13)
J'essai d'utiliser la galerie photo : https://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html.
Idéalement j'aimerais 8 ou 10 galerie photos sur la même pages. Pour commencer j'ai déjà créer 2 galeries côte à côte. La première ne marche pas alors que la deuxième marche.
Le problème : lorsque je clique sur une miniature, la photo ne s'affiche pas en grand dans la fenêtre comme ce doit être le cas mais elle s'ouvre à la place de la page !
Voici mon code dans le "<head>" :
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="script2.js"></script>
Voici mon code dans le "<body>" :
<section class="galerie-s1">
<article class="galerie-s1-a1">
<center>
<table>
<thead>
<tr>
<th>
<div id="galerie">
<ul id="galerie_mini">
<li>
<a href="IMAGES/galerie/G1/G101.JPG" title="Titre de la photo 1"><img src="IMAGES/galerie/G1/G101.JPG" alt="Le titre de la photo 1" class="mini-photo"/></a> </li>
<li>
<a href="IMAGES/galerie/G1/G102.JPG" title="Titre de la photo 2"><img src="IMAGES/galerie/G1/G102.JPG" alt="Le titre de la photo 2" class="mini-photo"/></a> </li>
<li>
<a href="IMAGES/galerie/G1/G103.JPG" title="Titre de la photo 3"><img src="IMAGES/galerie/G1/G103.JPG" alt="Le titre de la photo 3" class="mini-photo"/></a> </li>
<li>
<a href="IMAGES/galerie/G1/G104.JPG" title="Titre de la photo 4"><img src="IMAGES/galerie/G1/G104.JPG" alt="Le titre de la photo 4" class="mini-photo"/></a> </li>
<li>
<a href="IMAGES/galerie/G1/G105.JPG" title="Titre de la photo 5"><img src="IMAGES/galerie/G1/G105.JPG" alt="Le titre de la photo 5" class="mini-photo"/></a> </li>
<li>
<a href="IMAGES/galerie/G1/G106.JPG" title="Titre de la photo 6"><img src="IMAGES/galerie/G1/G106.JPG" alt="Le titre de la photo 6" class="mini-photo"/></a> </li>
<li>
<a href="IMAGES/galerie/G1/G107.JPG" title="Titre de la photo 7"><img src="IMAGES/galerie/G1/G107.JPG" alt="Le titre de la photo 7" class="mini-photo"/></a> </li>
<li>
<a href="IMAGES/galerie/G1/G108.JPG" title="Titre de la photo 8"><img src="IMAGES/galerie/G1/G108.JPG" alt="Le titre de la photo 8" class="mini-photo"/></a> </li>
<li>
<a href="IMAGES/galerie/G1/G109.JPG" title="Titre de la photo 9"><img src="IMAGES/galerie/G1/G109.JPG" alt="Le titre de la photo 9" class="mini-photo"/></a> </li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="IMAGES/galerie/G1/G101.JPG" alt="photo 1 en taille normale" class="mini-photo-2"/></dd>
</dl>
</div>
</th>
<th>
<div id="banque">
<ul id="banque_mini">
<li>
<a href="IMAGES/galerie/G2/G201.JPG" title="Titre de la picto A"><img src="IMAGES/galerie/G2/G201.JPG" alt="Le titre de la picto A" class="mini-picto"/></a> </li>
<li>
<a href="IMAGES/galerie/G2/G202.JPG" title="Titre de la picto B"><img src="IMAGES/galerie/G2/G202.JPG" alt="Le titre de la picto B" class="mini-picto"/></a> </li>
<li>
<a href="IMAGES/galerie/G2/G203.JPG" title="Titre de la picto C"><img src="IMAGES/galerie/G2/G203.JPG" alt="Le titre de la picto C" class="mini-picto"/></a> </li>
<li>
<a href="IMAGES/galerie/G2/G204.JPG" title="Titre de la picto D"><img src="IMAGES/galerie/G2/G204.JPG" alt="Le titre de la picto D" class="mini-picto"/></a> </li>
<li>
<a href="IMAGES/galerie/G2/G205.JPG" title="Titre de la picto E"><img src="IMAGES/galerie/G2/G205.JPG" alt="Le titre de la picto E" class="mini-picto"/></a> </li>
<li>
<a href="IMAGES/galerie/G2/G206.JPG" title="Titre de la picto F"><img src="IMAGES/galerie/G2/G206.JPG" alt="Le titre de la picto F" class="mini-picto"/></a> </li>
</ul>
<dl id="picto">
<dt>Titre de la picto A</dt>
<dd><img id="big_picto" src="IMAGES/galerie/G2/G201.JPG" alt="picto A en taille normale" class="mini-picto-2"/></dd>
</dl>
</div>
</th></tr></thead>
</table>
</center>
</article>
</section>
Voici mon code script.js :
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;
Voici mon code script2.js :
function displaypopo()
{
var pictos = document.getElementById('banque_mini') ;
// On récupère l'élément ayant pour id banque_mini
var liens = pictos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans banque_mini
var big_picto = document.getElementById('big_picto') ;
// Ici c'est l'élément ayant pour id big_picto qui est récupéré, c'est notre picto en taille normale
var titre_picto = document.getElementById('picto').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la picto de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans banque_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
big_picto.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_picto.alt = this.title; // On change son titre
titre_picto.firstChild.nodeValue = this.title; // On change le texte de titre de la picto
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displaypopo;
Merci de votre aide
Modifié par KennyFal (28 Mar 2020 - 17:13)