JQuery Galerie d'image avec légende
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:
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:
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... :calim2:
JS
Code:
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:
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 ? :ccool:
