Galerie photo
AA
-
AA -
AA -
Bonjour,
Je souhaite réaliser une galerie photo très simple. Grande image à gauche et menu de petites images à droite. J'aimerais conserver le roll-over sur les petites images du menu (image plus pâle). J'aimerais que lorsqu'on clique sur l'image, la grande image est remplacé par celle demandé.
Vous pouvez voir la page temporaire que je souhaite faire fonctionner ici:
http://andreeannevien.com/projets/projets.html
Pour l'instant le problème est que les images ouvrent dans une nouvelle fenêtre plutôt que de remplacer la grande image de gauche.
La page est associée à ce fichier javascript:
http://andreeannevien.com/projets/photos.js
qui contient 3 fonctions. 1-galerie photo 2-video 3-swap image
La fonction de la galerie a été prise dans un tutorial sur le web et les deux autres à partir de dreamweaver, y a-t-il incompatibilité entre les script?
Pourquoi l'image ne s'ouvre pas où je le souhaite?
Merci milles fois pour votre aide!
Je souhaite réaliser une galerie photo très simple. Grande image à gauche et menu de petites images à droite. J'aimerais conserver le roll-over sur les petites images du menu (image plus pâle). J'aimerais que lorsqu'on clique sur l'image, la grande image est remplacé par celle demandé.
Vous pouvez voir la page temporaire que je souhaite faire fonctionner ici:
http://andreeannevien.com/projets/projets.html
Pour l'instant le problème est que les images ouvrent dans une nouvelle fenêtre plutôt que de remplacer la grande image de gauche.
La page est associée à ce fichier javascript:
http://andreeannevien.com/projets/photos.js
qui contient 3 fonctions. 1-galerie photo 2-video 3-swap image
La fonction de la galerie a été prise dans un tutorial sur le web et les deux autres à partir de dreamweaver, y a-t-il incompatibilité entre les script?
Pourquoi l'image ne s'ouvre pas où je le souhaite?
Merci milles fois pour votre aide!
A voir également:
- Galerie photo
- Google photo - Télécharger - Albums photo
- Galerie photo en ligne gratuite - Guide
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
- Comment masquer une photo dans la galerie - Guide
- Google maps photo maison - Guide
1 réponse
Bonjour,
Voici un petit exemple concret d'un cas où JavaScript :
Les codes html :
Les codes css:
La fonction JavaScript gérant la galerie:
Il faut maintenant créer la fonction JavaScript qui gérera notre galerie, commençons par l'appeler dans notre page html en plaçant cette ligne dans la partie <head> : <script type="text/javascript" src="script.js"></script>
Il faut maintenant créer le fichier script.js.
Voici un petit exemple concret d'un cas où JavaScript :
Les codes html :
<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
Les codes css:
div#galerie
{
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
La fonction JavaScript gérant la galerie:
Il faut maintenant créer la fonction JavaScript qui gérera notre galerie, commençons par l'appeler dans notre page html en plaçant cette ligne dans la partie <head> : <script type="text/javascript" src="script.js"></script>
Il faut maintenant créer le fichier 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
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
Mais malheureusement c'est le script que j'avais déjà suivi... Pourquoi ne fonctionne-t-il pas?