Placer un texte sous une image

**grisou-57** · 05/12/2016, 22h41

Bonjour,

j'ai un gros problème avec mon site internet. J 'ai une galerie d'une vingtaine de photos, je clic sur une miniature et une grande image apparaît, je reclic et la petites réapparaît ( 2 fichiers photos, 1 pour les petites vignettes et 1 pour les grandes photos).
tous fonctionne très bien avec le code javascript, mais je voudrai pouvoir mètre une légende sous le GRANDE photo.
si quelqu'un a une solution je suis preneur
merci

voici le code

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="galerie">
    <div id="grandeImage"></div>
    <div id="previous"><</div>
    <div id="next">></div>
</div>
<p>
 <a href="photos_galerie_web/grandes_vignettes/escalier-tour.jpg" alt="" Class="gal">
<img src="photos_galerie_web/petites_vignettes/1escalier_tour.jpg" height="167" width="266"  alt="miniature"/></a><span> Escalier de la tour</span>
<a href="photos_galerie_web/grandes_vignettes/Cabanne_de_chasseur-2+le.jpg" alt="" Class="gal">
 <img src="photos_galerie_web/petites_vignettes/cabane_de_chasseur-2.jpg" height="167" width="266"  alt="miniature"/></a><span>Cabane de chasseur</span>
</p>

le javascript

Code javascript :

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
var links = document.getElementsByClassName('gal'), 
    linksLen = links.length,
    grandeImage = document.getElementById('grandeImage'),
    galerie = document.getElementById('galerie'),
    imgActive;
 
for (var i = 0 ; i < linksLen ; i++){
    (function(i){
        links[i].onclick = function(){
            imgActive = i;
            displayImg();
            return false;
        };
    })(i);
}
 document.getElementById('previous').onclick=function(){
    if(!links[--imgActive]) 
        imgActive = linksLen - 1;
    displayImg();
};
document.getElementById('next').onclick=function(){
    if(!links[++imgActive]) 
        imgActive = 0;
    displayImg();
};
 var displayImg=function() {
    var img = new Image();
    img.src = links[imgActive].href;
    img.onload = function(){
        grandeImage.innerHTML = '';
        galerie.style.display = 'block';
        grandeImage.appendChild(img);
    };
};
grandeImage.onclick = function(){
    galerie.style.display = 'none';
};

les css

Code css :

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
#galerie{display:none;
	position:fixed;
    top:-1px;
    margin-left:auto;
    margin-right:auto;
    width:110%;
    height:110%;
    background-color:#FFFFE1;
    z-index:85;
}
#grandeImage
{position:absolute;
    margin-top:60px;	
	margin-left:auto;
    margin-right:auto;
    width:1400px;
 
}
 
p{width:1235px;
	margin-left:auto;
	margin-right:35px;
	margin-top:5px;
	float:right;
	position:relative;
	z-index:-25;
}
 
/*grande-image*/
 img{border:3px outset #CCC;box-shadow:#333 4px 1px 15px 1px;
     padding:1px;
     margin-left:5px;
	 margin-top:5px;
 }
 
/*
petites vignettes*/
 a img {border:1px outset #CCC;box-shadow:#333 4px 1px 5px 1px;
	 padding:1px; 
	 float:left;
	 margin-left:10px;
	 margin-top:10px;
	 cursor:inherit;}

**JefReb** · 08/12/2016, 16h44

Bonjour,

En premier, je vois un sélecteur d'ID qui est utilisé plusieurs fois dans le code, ce qui ne doit pas être. #galerie, #grand-image. Un sélecteur de classe aurait suffit.
Il existe de nombreuses solutions pour faire ce diaporama avec des sous titres. lightbox, sexylightbox, etc. Très facile à mettre en place.

Il est aussi possible et amusant de faire une galerie sans javascript.
Nous avons la chance avec le HTML5 d'avoir les balises <figure> et <figcaption> qui permettent de mettre un sous-titre à l'image.

J'ai essayé votre code, et en prenant des photos à moi, je vois qu'une fois avoir cliqué sur une vignette, la photo est agrandie,certes, mais impossible de revenir en arrière.

Une solution a été donné dans ce forum par jreaux62 avec cet exemple: http://codepen.io/jreaux62/pen/ObOZKM

J'ai repris sans vergogne son code (je le prie de m'en excuser) pour utiliser <figcaption> et j'obtiens: http://codepen.io/JefReb/pen/JbZMKg

Code CSS :

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
.conteneur_images {
	text-align: center;
	max-width: 960px;
	margin: 150px auto;
}
figure {
	text-align: center;
	display: inline-block;
	position: relative;
	margin: 5px;
}
figure img {
	width: 140px;
	height: 140px;
	overflow: hidden;
}
figcaption {
	margin: 0;
	padding: 0;
}
figure img {
	position: relative;
	top: 0;
	left: 0;
	min-width: 100%;
	min-height: 100%;
	max-width: 200px;
	max-height: 200px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
figure img:hover {
	z-index: 2;
	box-shadow: 5px 5px 7px #333;
	-webkit-transform: scale(3) /*rotate(-3deg)*/;
	-moz-transform: scale(3) /*rotate(-3deg)*/;
	-o-transform: scale(3) /*rotate(-3deg)*/;
	transform: scale(3) /*rotate(-3deg)*/;
}

Code html :

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
<div class="conteneur_images">
  <figure> <img src="http://www.photodenature.fr/wp-content/uploads/2015/01/photo-Dauphin.jpg" alt="">
    <figcaption>
      <p>Photo 1</p>
    </figcaption>
  </figure>
  <figure> <img src="http://www.photodenature.fr/wp-content/uploads/2015/01/photo-H%C3%A9ron-goliath-6.jpg" alt="">
    <figcaption>
      <p>Photo 2</p>
    </figcaption>
  </figure>
  <figure> <img src="http://www.photodenature.fr/wp-content/uploads/2015/01/photo-Putois-%C3%A0-pieds-noirs-2.jpg" alt="">
    <figcaption>
      <p>Photo 3</p>
    </figcaption>
  </figure>
</div>

**grisou-57** · 08/12/2016, 22h52

Bonjour,
merci de vos critiques, mais je dois vous signaler que j'utilise 2 fichiers photos , un pour les vignettes et un pour les grandes images.
là ou est mon problème c'est que j'arrive pas a mettre une légende sous la grande image.
le faite de cliquer sur une vignettes et afficher la grande image et de revenir sur la vignettes fonctionne très bien.
j'ai essayé avec figure et les balises class et div sans arrivé a mettre une légende sous la grande image.

je vais essayé votre code avec figure et les css.

merci pour patience.

Invité · 09/12/2016, 05h49

Bonjour et bienvenu sur DVP.

Ta problématique est en effet différente : utilisation de 2 images + JavaScript.

La 1ere question : "comprends-tu suffisamment le code JavaScript pour savoir le modifier ?"

Sinon, on trouve facilement des scripts/plugin de "galerie photos"

lightbox, colorbox, prettyphoto,...
...qui font très bien le travail.

**JefReb** · 09/12/2016, 09h14

Je me garderais bien des critiques, mais seulement des avis sur les règles à respecter en html-css.
Peut importe l'utilisation de 2 fichiers, moi je vois 4 ID dans une même page, ce qui ne devrait pas être.
De plus regardez les < en double. les navigateurs sont tolérents, mais un code propre est quand même préférable.
Votre code ...

Code HTML :

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

1
2
3
4
5
<div id="galerie">
    <div id="grandeImage"></div>
    <div id="previous"><</div>
    <div id="next">></div>
</div>

Et comme a dit jreaux62 et moi-même, il y a d'excellents scripts/plugin de "galerie photos" lightbox, sexylightbox,colorbox, prettyphoto, fancybox, etc.

**grisou-57** · 09/12/2016, 12h43

bonjour,

a l'origine je cherché a faire une galerie d'une vingtaine de photos, en format vignette, je clic sur la vignette et une grande apparaît, je reclic sur la grande et la vignette réapparaît.
les plugin que j"avais trouvé ne me convenait pas , enfin il n'avait pas cette souplesse.
j'ai trouvé un code en javascript qui me donné le résultat escompté, ensuite je voulais rajouté des boutons "next" et "prev" pour pouvoir passer d'une grande photo a l'autre sans passer par les vignettes, tout en gardant la possibilité de revenir sur les vignettes et ça fonctionne très bien. mais maintenant j'aimerai pouvoir mettre une légende sous la grande photo. et là je patine dans la semoule.
je t'avoue que je ne mis connait pas assez en javascript, donc impossible de faire une quelconque modification du code.

merci pour tes conseils

Invité · 09/12/2016, 12h47

Bonjour,

voici une petite modif. du code de JefReb* : http://codepen.io/jreaux62/pen/RoBNLR

* échange de bons procédés

Code css :

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
figure img {
  position: relative;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  max-width: 200px;
  max-height: 200px;
}
 
figure img,
figure figcaption {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
figure:hover img {
  z-index: 2;
  box-shadow: 5px 5px 7px #333;
  -webkit-transform: scale(3);
  -moz-transform: scale(3);
  -o-transform: scale(3);
  transform: scale(3);
}
 
figure:hover figcaption {
  z-index: 3;
  background:rgba(255,255,255,0.5);
  border-radius:20px;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

**Cyberdome** · 09/12/2016, 14h27

JefReb, si je ne m'abuse il me semble au contraire que la bonne pratique est d'utiliser des id. Par contre les id doivent avoir un nom unique et c'est pourquoi beaucoup de programmeurs pour se simplifier la vie mettent des class partout, mais ce n'est pas une bonne pratique même si c'est sans conséquences. Si l'on veut créer des liens internes "haut de page" et "bas de page" on est bien obligé d'utiliser plusieurs id. La class a pour vocation de styliser plusieurs éléments à la fois, on peut donc en mettre plusieurs du même nom. Si une classe a vocation à être unique il faut en principe lui préférer un id. D'autant que l'id est plus rapide à cibler en javascript.

Invité · 09/12/2016, 15h36

A savoir :

Plusieurs éléments peuvent avoir la même classe ;
Il ne doit y avoir qu'un seul élément ayant un id donné.

Premiers pas avec les CSS

A lire aussi :

Règles d'application des styles CSS et gestion des conflits

**Cyberdome** · 09/12/2016, 15h46

Envoyé par JefReb

Je me garderais bien des critiques, mais seulement des avis sur les règles à respecter en html-css.
Peut importe l'utilisation de 2 fichiers, moi je vois 4 ID dans une même page, ce qui ne devrait pas être.

Dans le code de grisou-57 ce sont bien 4 id différents, à moins que grisou a corrigé le code de son premier message entre temps.

Invité · 09/12/2016, 16h43

@Cyberdome

Ma foi, tu as raison !
(je n'avais même pas regardé le code...)

De plus :

Envoyé par JefReb

...De plus regardez les < en double...

Code :

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

1
2
    <div id="previous"><</div>
    <div id="next">></div>

Mais non !
Ce sont les "<" et ">" des boutons "Précédent" et "suivant" !

Donc JefReb, au boulot :

**grisou-57** · 09/12/2016, 18h30

bonjour a tous

les doubles >> c'est une erreur de copiage

les id "next et previous" sont des boutons que j'ai rajouté par la suite

grisou

**JefReb** · 13/12/2016, 09h23

désolé, la fatigue! J'ai été un peu vite.
Mais essayer de comprendre et d'aider sont une bonne chose pour évoluer ...

**Cyberdome** · 13/12/2016, 13h28

Oui, c'est pas grave. J'ai eu peur que Grisou ne commence à enlever tout les id de son site lol
Désolé pour la gène occasionnée

Placer un texte sous une image

Positionnement en CSS

Discussions similaires

Partager

Partager