Galerie d'images simple avec jquery. Comment ajouter des légendes?

Bonjour,
Je me présente, je m'appelle Marine.

Je démarre dans le javascript, et je me retrouve face à un problème dans la réalisation d'une galerie sur le modèle du tutoriel alsacréations de Benjamin "une galerie d'images simple avec jquery".

Visible ici:
http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

Je vous explique.
Je voudrais simplement que des légende s'affichent aux côtés de mes images quand on clique sur les numéros qui leur correspondent. Je n'y arrive pas.

Si quelqu'un peut m'aider, je lui en serais très reconnaissante.
Vous pouvez voir la galerie que je tente de réaliser ici:
http://www.mlg-graphiste.fr/studiopatrick/galerie/fap/fap01.php

Merci d'avance.
Marine

Personne ne peut m'aider?

Merci quand meme.

Bonjour,

Je t'invite à lire cet article:
http://www.alsacreations.com/actu/lire/723-notes-tutoriel-galerie-jquery.html

Merci beaucoup.
Avec cet article et un livre je devrais y arriver... enfin, j'espère!

Si tu bloques en cours de route tu peux toujours demander à nouveau de l'aide.

En passant, les initiales de Fine Art Photography sont peu heureuses pour toute personne connaissant un peu le slang.

ok, merci, c'est sympa!
Pour la partie fine art bla bla, j'avoue que ce ne sont pas mes photos. Je fais ce site pour quelqu'un. je ne connais rien en fine art bla bla et en slang.

Mais j'en tiendrai compte. merci pour la remarque.
A bientot.

Bonjour,

J'ai cherché également à ajouter une légende à chaque photo. J'ai réussi à modifier le code et ça donne ça:

html:

<!--galerie photo-->

<div id="galerie"> <!--miniatures-->
    <ul id="thumbs"> 
        <li><a href="images/galerie_affiches/photo01.jpg" title="Titre de la photo 1"><img src="images/minis_affiches/photo01.jpg" style="border:0px; " alt="desc" /> 
		<span>download original</span></a></li> 
 
        <li><a href="images/galerie_affiches/photo02.jpg" title="Titre de la photo 2"><img src="images/minis_affiches/photo02.jpg" style="border:0px; " alt="Le titre de la photo 2" />
		<span>download original</span></a></li> 
		
        <li><a href="images/galerie_affiches/photo03.jpg" title="Titre de la photo 3"><img src="images/minis_affiches/photo03.jpg" style="border:0px; " alt="Le titre de la photo 3" />
		<span>download original</span></a></li> 
		
        <li><a href="images/galerie_affiches/photo04.jpg" title="Titre de la photo 4"><img src="images/minis_affiches/photo04.jpg" style="border:0px; " alt="Le titre de la photo 4" />
		<span>download original</span></a></li> 
 
        <li><a href="images/galerie_affiches/photo05.jpg" title="Titre de la photo 5"><img src="images/minis_affiches/photo05.jpg" style="border:0px; "alt="Le titre de la photo 5" />
		<span>download original</span></a></li> 
    </ul> 
 
 <p id="viewer"></p> <!--visualisateur avec image grande taille-->     
</div> 

mon code javascript

jQuery(function($){
 
  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
	spanViewerId: "span",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "../images/loading.gif"
  };
 
  var thumbLinks = $("#"+settings.thumbListId).find("a"),
      firstThumbLink = thumbLinks.eq(0),
      highlight = function(elt){
        thumbLinks.removeClass(settings.activeClass).removeAttr("title");
        elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
      },
      loader = $(document.createElement("p")).append($(document.createElement("img")).attr({
        alt: settings.loaderTitle,
        title: settings.loaderTitle,
        src: settings.loaderImage
      }).addClass('loader'));
 
  highlight(firstThumbLink);
 
  $("#"+settings.thumbListId).after(
	$(document.createElement('div')).attr("id","bigpic")
		.append( $(document.createElement("p")).attr("id",settings.imgViewerId)
			.append($(document.createElement("img")).attr( {
	          alt: firstThumbLink.find('img').attr("alt"),
	          src: firstThumbLink.attr("href")
	        })).append( $(document.createElement("span")).text( firstThumbLink.find('span').text() ) )
	    ).append(loader)
	);
 
  var imgViewer = $("#"+settings.imgViewerId),
      bigPic = imgViewer.children("img");
 
  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this);
      if (bigPic.attr("src") == $this.attr("href")) return;
      
      highlight($this);
      imgViewer.fadeOut(100, function() {
	      imgViewer.children("img").load( function() {
	          imgViewer.find('span').text($this.find('span').text());
	          imgViewer.fadeIn(100);
	      } ).attr( { src: $this.attr("href"), alt: $this.find('img').attr('alt') } );
      } );
    });
 
});
 
$( function() { 
	$("#thumbs span").hide();
} );
 

et mon code css

#thumbs {
	position:absolute;
	overflow:auto;
	list-style:none;
	margin:20px;
	padding:0;
	left: 17px;
	top: 67px;
	width: 400px;
	z-index: 50;
} 

#thumbs li {float:left;} 

#thumbs a {display:block; padding:5px; outline:none;} 

#thumbs a:hover, #thumbs a:focus {background:#fff;} 

#thumbs a.active {background:#ff9933;} 

#viewer {
	position:absolute;
	width:600px;
	height:465px;
	margin-left:30px;
	top: 86px;
	left: 436px;
} 

#viewer img[src*="loader"] {position:absolute; left:50%; top:50%; margin:-15px 0 0 -15px;}

#thumbs span {
font-style:italic;
display:none;
}

#viewer span {
font-style:italic;
position:absolute;
left:30%;
top:100%;}

Je suis contente du résultat.
Mais j'aimerai que la légende devienne un lien pour télécharger l'image en taille originale.
Du coup j'ai ajouter un lien autour du "download original"
Dans mon code javascript, j'ai rajouter une nouvelle variable et créé la fonction

spanLinks
.click(function(){ 
      this.target='_blank';
  }); 

Mais ça ne marche pas. Je pense que ça coince au niveau du code javascript, mais à force je ne vois plus rien.

Quelqu'un à une idée?

Merci beaucoup