Aide sur galerie photo js

2 novembre 2010 à 10:49:33

Bonjour,

Je suis en train de faire un site web en amateur avec des galeries photo. Mes connaissances portent plutôt sur html et css, ce qui me suffit pour réaliser un site sans logiciel.
J'ai trouvé un script de galerie photo en javascript qui me va tout à fait et qui fonctionne très bien.
Il a l'avantage d'être très léger puisque tout est sur une page + un script.js dans un fichier séparé.
L'affichage est de style 1 grande image en taille réelle et un bandeau défilant de miniatures en dessous réalisé avec du css.
Voici le code html :

<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="galerie"><h2>Un endroit ordinaire</h2>
    <dl id="photo">
    
      <dd><img id="big_pict" src="galeries/UnEndroitOrdinaire/1.jpg" alt="" /></dd>
    <dt>Un endroit ordinaire - 1</dt>
    </dl>
    
    <ul id="galerie_mini">
      <li><a href="galeries/UnEndroitOrdinaire/1.jpg" title="Un endroit ordinaire - 1"><img src="galeries/UnEndroitOrdinaire/mini/m_1.jpg" alt="" /></a></li>
      <li><a href="galeries/UnEndroitOrdinaire/2.jpg" title="Un endroit ordinaire - 2"><img src="galeries/UnEndroitOrdinaire/mini/m_2.jpg" alt="" /></a></li>
      <li><a href="galeries/UnEndroitOrdinaire/3.jpg" title="Un endroit ordinaire - 3"><img src="galeries/UnEndroitOrdinaire/mini/m_3.jpg" alt="" /></a></li>
      <li><a href="galeries/UnEndroitOrdinaire/4.jpg" title="Un endroit ordinaire - 4"><img src="galeries/UnEndroitOrdinaire/mini/m_4.jpg" alt="" /></a></li>
       <li><a href="galeries/UnEndroitOrdinaire/5.jpg" title="Un endroit ordinaire - 5"><img src="galeries/UnEndroitOrdinaire/mini/m_5.jpg" alt="" /></a></li>
      <li><a href="galeries/UnEndroitOrdinaire/6.jpg" title="Un endroit ordinaire - 6"><img src="galeries/UnEndroitOrdinaire/mini/m_6.jpg" alt="" /></a></li>
      
      
    </ul>
    
</div>
</body>

Et pour la partie javascript :

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

J'aimerais ajouter une fonction qui permette de passer à l'image suivante en cliquant sur la grande photo (bic_pict)
Est-ce faisable en ajoutant une fonction à ce code ?
Sinon est-ce possible d'ajouter des fonctions image précédente, image suivante associée à des boutons ? Dans ce cas, comment faire ?
Je précise que je ne suis pas du tout spécialiste de javascript donc merci de votre indulgence et de votre compréhension.
Et d'avance un grand merci pour votre aide

lieo

2 novembre 2010 à 20:46:10

J'ai limite envie de dire que le Javascript ici n'a pas de vrai utilité (celui que t'utilise).
Si tu veux faire un petit diaporama facilement en Css je te renvoie à cet exemple.

Dans ton cas ça donnera : un div d'affichage (overflow:hidden) avec les images en grandes.
Et par exemple en dessous les images en petit, qui serrons des liens avec une ancre pointant sur les images en grandes.

Sinon en Javascript ce que tu demande est assez simple, mais n'a pas vraiment d'intérêt vu qu'on peut le faire en Css.
(C'est utile dans le cas ou les images défiles toutes seules par exemple).

masaccess

3 novembre 2010 à 9:42:45

Merci Lieo pour cette réponse.
C'est intéressant de savoir que je peux tout faire en css.
En fait, j'aimerais donner à la galerie un côté un peu plus dynamique.
Faire défiler les vignettes en pointant avec la souris par ex, si c'est faisable en javascript sans avoir un code trop compliqué, j'aimerais bien savoir comment faire.
Et puis, ajouter des fonctions qui permettent de passer d'une photo à l'autre :
- en cliquant sur la photo en taille réelle
- en utilisant des boutons suivant précédent
Tout ceci sans ouvrir de nouvelles pages si possible... Quelqu'un a-t-il une solution ? Je vais également regarder les autres post qui traitent des galeries photos
Merci à tous ceux qui pourront m'aider à partir du code que j'ai décrit plus haut !
Bonne journée