JQuery Galerie d'image avec légende

**Beni-Martouff** · 23/06/2009, 10h22

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 ?

**danielhagnoul** · 23/06/2009, 12h43

Bonjour.

Ce tutoriel n'est rien d'autre que la copie, photos incluses, de http://leandrovieira.com/projects/jquery/lightbox/

Ce plugin a déjà fait l'objet d'une intervention, voici la copie de l'exemple fourni à cette occasion :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Test Lightbox</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid red;
			font-size:0.8em;
		}
 
		/* jQuery lightBox plugin - Gallery style */
		#gallery {
			background-color: #444;
			padding: 10px;
			width: 520px;
		}
		#gallery ul { list-style: none; }
		#gallery ul li { display: inline; }
		#gallery ul img {
			border: 5px solid #3e3e3e;
			border-width: 5px 5px 20px;
		}
		#gallery ul a:hover img {
			border: 5px solid #fff;
			border-width: 5px 5px 20px;
			color: #fff;
		}
		#gallery ul a:hover { color: #fff; }
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){ 
			$("#gallery a").lightBox();
 
			$("#go").live("click", function(){
				$("#goGallery").click();
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="go" type="button">OK</button>
		<div id="gallery">
			<ul>
				<li>
					<a id="goGallery" href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
						<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
					</a>
				</li>
				<li>
					<a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
						<img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
					</a>
				</li>
				<li>
					<a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
						<img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
					</a>
				</li>
				<li>
					<a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
						<img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
					</a>
				</li>
				<li>
					<a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
						<img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
					</a>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

**Beni-Martouff** · 23/06/2009, 15h44

Merci pour ton aide mais ce n'est pas d'une lightbox dont j'ai besoin, mais bien de l'effet de fade sur mes thumbs, je pense ne pas être loin de trouver la solution mais si tu as a une piste pour modifier le code actuel....

**danielhagnoul** · 23/06/2009, 17h28

Bonjour.

Je veux bien croire que cela ne vous agrée pas, mais avez-vous pris la peine de regarder la démo ?

Il y a un effet de fading et des légendes aux photos.

**Beni-Martouff** · 24/06/2009, 10h33

Désolé danielhagnoul, je ne voulais pas te froisser, j'ai regardé le code mais j'avoue ne pas savoir encore rééxploiter du code exterieur pour améliorer ma solution. Néanmoins, cela m'a permis de m'y pencher sérieusement avec un ami pas plus tard qu'hier soir et nous avons trouvé la solution suivante :

HTML

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
 
<ul id="thumbs">
    <li>
	<a href="./images/1.jpg" title="Titre">
           <img src="./images/thumbs/1.jpg" alt="desc" />
           <span>Desc 1</span>
	</a>
    </li>
    <li>
	<a href="./images/2.jpg" title="Titre">
           <img src="./images/thumbs/2.jpg" alt="desc" />
           <span>Desc 2</span>
	</a>
    </li>
    <li>
	<a href="./images/3.jpg" title="Titre">
           <img src="./images/thumbs/3.jpg" alt="desc" />
           <span>Desc 3</span>
	</a>
    </li>
    <li>
	<a href="./images/4.jpg" title="Titre">
           <img src="./images/thumbs/4.jpg" alt="desc" />
           <span>Desc 4</span>
	</a>
    </li>
</ul>

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
57
58
59
 
jQuery(function($){
 
  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "./images/design/progress.gif"
  };
 
  var thumbLinks = $("#"+settings.thumbListId).find("a"),
      firstThumbLink = thumbLinks.eq(10),
      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(400, function() {
	      imgViewer.children("img").load( function() {
	          imgViewer.find('span').text($this.find('span').text());
	          imgViewer.fadeIn(400);
	      } ).attr( { src: $this.attr("href"), alt: $this.find('img').attr('alt') } );
      } );
    });
 
});
 
$( function() { 
	$("#thumbs span").hide();
} );

**sarahdel88** · 04/05/2010, 12h12

Bonjour,

Je débute en javascript et j'ai quelques soucis avec ma galerie d'images. J'ai également suivi un tutoriel javascript et le tout fonctionne bien. J'ai adapté le code pour ajouter une légende grâce à une balise <span> et là aussi ça fonctionne bien.
Ensuite j'ai voulu ajouter un lien à la légende afin d'ouvrir l'image en taille originale dans un nouvel onglet. Et c'est là que ça coince. Je dois faire une erreur au niveau du code javascript.
Sinon, j'ai pensé à une autre possibilité. Au lieu de créer une balise <span>, la description avec le lien pourrait être extrait du titre du lien vers la photo. Du style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 <ul id="thumbs"> 
        <li>
<a href="images/galerie_affiches/photo01.jpg" title="<a href='images/galerie_affiches/photo01_O.jpg' target='_blank' >Download original</a>"><img src="images/minis_affiches/photo01.jpg" style="border:0px; " alt="desc" /> </a>
</li> 
</ul>

Mais je ne vois pas comment faire en javascript. J'ai pensé à ajouter une variable "description"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var description = $(this).attr("title");

faudrait qu'il puisse extraire le titre pour créer une nouvelle balise en dessous de l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$('#viewer span').html("" + description + "");  
    });

Mais je ne sais pas comment ajouter tout ça au code de base.
Quelqu'un peut m'aider?

Merci

JQuery Galerie d'image avec légende

jQuery

Discussions similaires

Partager

Partager