Bonjour à tous !

J'en appelle à vous pour modifier un tuto que j'ai suivi.

Le tuto étant bien fait j'ai pu recréer l'effet à ma convenance mais là je bloque sur un ajout. Je souhaite modifier le code html suivant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
<ul id="thumbs">
    <li>
	<a href="./images/1.jpg" title="Titre">
           <img src="./images/thumbs/1.jpg" alt="desc" />
	</a>
    </li>
    <li>
	<a href="./images/2.jpg" title="Titre">
           <img src="./images/thumbs/2.jpg" alt="desc" />
	</a>
    </li>
</ul>
en :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<ul id="thumbs">
    <li>
	<a href="./images/1.jpg" title="Titre">
           <img src="./images/thumbs/1.jpg" alt="desc" />
           <span>Description</span>
	</a>
    </li>
    <li>
	<a href="./images/2.jpg" title="Titre">
           <img src="./images/thumbs/2.jpg" alt="desc" />
           <span>Description</span>
	</a>
    </li>
</ul>
Je souhaite donc faire apparaître une légende sous mes grandes images avec le même effet de fade au clic de chaque thumb, j'ai eu beau tourner dans tous les sens, je n'y arrive pas...

JS

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
jQuery(function($){
 
  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "images/loader.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("img")).attr({
      alt: settings.loaderTitle,
      title: settings.loaderTitle,
      src: settings.loaderImage
    });
 
  highlight(firstThumbLink);
 
  $("#"+settings.thumbListId).after(
    $(document.createElement("p"))
      .attr("id",settings.imgViewerId)
      .append(
        $(document.createElement("img")).attr({
          alt: "",
          src: firstThumbLink.attr("href")
        })
      )
  );
 
  var imgViewer = $("#"+settings.imgViewerId),
    bigPic = imgViewer.children("img");
 
  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this),
        target = $this.attr("href");
      if (bigPic.attr("src") == target) return;
      highlight($this);
      imgViewer.html(loader);
      bigPic
        .load(function(){
          imgViewer.html($(this).fadeIn(250));
        })
        .attr("src",target);
    });
 
});
CSS
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
body {background:#222;}
img {vertical-align:middle; border:none;}
#thumbs {overflow:auto; list-style:none; margin:30px; padding:0;}
#thumbs li {float:left;}
#thumbs a {display:block; padding:10px; outline:none;}
#thumbs a:hover, #thumbs a:focus {background:#fff;}
#thumbs a.active {background:#000;}
#viewer {position:relative; width:700px; height:465px; margin-left:30px;}
#viewer img[src*="loader"] {position:absolute; left:50%; top:50%; margin:-15px 0 0 -15px;}
Un petit coup de pouce ?