Galerie de photos et légende

Bonjour à toutes et à tous,

J'ai une galerie de photos à l'écran. Quand le curseur de la souris se trouve sur une des photos, je souhaite afficher au dessus et en bas de la photo la légende associée sur un fond noir.
Merci d'avance.

Salut,

Sans code html/Css et/ou javascript on ne peux pas t'aider.
Un lien vers ton site avec ton problème serait pas mal ou le code source, à toi de voir.

Je suppose que c'est avec jquery (evenement mouseover) que tu parviendra le plus facilement à faire ca:


http://docs.jquery.com/Events/mouseover#fn

Je n'ai pas encore codé ma galerie de photos.
L'idée est de mettre un lien (<a href="...."><img ...></a>) sur chaque photo; et un '<span>...</span>' qui contient la légende. Je ne vois pas comment positionner la légende en bas et haut dessus du cliché.

En ayant une structure du genre :

<div class="vignette">
<span>Ton texte</span>
<a><img/></a>
<span>Ton texte</span>
</div>

et en js :

    $("div.vignette > a").mouseover(function(){
      $(this +'> span').show();
    }).mouseout(function(){
       $(this +'> span').hide();
    });

Là ça devrait masquer ta légende en mouseout et afficher ta légende en mouseover de ta vignette.

Bonjour,

Je pense que tu trouveras ton bonheur avec ce lien...

http://www.queness.com/post/484/create-a-thumbnail-gallery-with-slick-heading-and-caption-effect-with-jquery

La démo donne un sacré rendu!

Bye et bon dév.

Yo,

C'est très bien de proposer du jQuery à gogo, mais pour le besoin (et sauf si on veut faire des effets d'animation tout jolis tout plein) ça me semble inutile.

La structure évoquée par luxojr me semble suffisante:

<a href="vers la photo en grand" class="photo-preview">
  <img src="la photo en petit" alt="Titre de la photo" />
  <span>Légende de la photo</span>
</a>

Partant de ça, on peut faire quelque chose de très correct. Par exemple:

.photo-preview {
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 1px solid black;
}
.photo-preview img {
  display: block;
}
.photo-preview span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -500px;
  padding: 10px;
  color: white;
  background: rgba(0,0,0,.6);
}
.photo-preview:hover span, .photo-preview:focus span {
  bottom: 0;
}

Améliorations possibles:
- On peut rendre ça compatible IE6 (parce que, comme je suis fourbe, j'ai fait l'impasse sur une ou deux limitations de Papy IE6 ).
- On peut utiliser les transitions CSS implémentées dans Webkit (et prochainement dans Firefox) pour réaliser un effet d'animation sympa, histoire de se faire plaisir (si on veut le même effet dans tous les navigateurs, JavaScript est nécessaire... mais on voit avec cet exemple que JavaScript n'intervient qu'à la fin, pas pour la construction de la galerie elle-même).

Et pour la route (à tester avec Firefox ou Opera d'une part et Safari ou Chrome d'autre part):
http://tests.deaxon.com/css/transitions/slide_infos/