Figcaption et hover sur diaporama

**dhillig** · 21/01/2015, 15h57

Bonjour à tous,
Je ne pensais pas que j'en arriverais là (voir lien ci-dessous), TOP !!!

http://www.developpez.net/forums/d14...ybox-isoptope/
Mais il doit y avoir un gros problème entre le code et moi, une certaine logique que j'espère avoir un jour

Voilà, depuis 4 jours (sans exagérer), je tente d'adapter à ma page des "figcaption et hover sur diaporama" provenant d'un tuto, puis d'un second tuto (avec un résultat aussi dynamique que le précédent, mais avec une méthode complètement différente). Je n'ai que des échecs :/
Voici mon HTML :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
    <div class="isotope" id="diaporama">
	    <a class="fancybox" href="img/kgbig.jpg" data-fancybox-group="gallery" alt="Kenny Garrett"><div class="work"><img src="img/kg.jpg" alt="" class="vignette divers"/>
        	    <div class="fond"></div>
	    <span>Test<br />Un</span></div></a>
        	    <a class="fancybox" href="img/kgbig.jpg" data-fancybox-group="gallery" alt="Kenny Garrett"><div class="work"><img src="img/kg.jpg" alt="" class="vignette divers"/>
        	    <div class="fond"></div>
	    <span>Test<br />Deux</span></div></a>
	    <a class="fancybox" href="img/jcbig.jpg" data-fancybox-group="gallery" title="Jeff Coffin"><img src="img/jc.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/jcbig2.jpg" data-fancybox-group="gallery" title="Jeff Coffin"><img src="img/jc-2.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/hbbig.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/hbbig2.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb-2.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/hbbig3.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb-3.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/dcbig.jpg" data-fancybox-group="gallery" title="Dennis Chambers"><img src="img/dc.jpg" alt="" class="vignette divers"/></a>        
	    <a class="fancybox" href="img/dcbig2.jpg" data-fancybox-group="gallery" title="Dennis CHambers"><img src="img/dc-2.jpg" alt="" class="vignette divers" border="0"/></a>
	    <a class="fancybox" href="img/bmbig.jpg" data-fancybox-group="gallery" title="Brandford Marsalis"><img src="img/bm.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/bfbig.jpg" data-fancybox-group="gallery" title="Bela Fleck"><img src="img/bf.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/bfbig2.jpg" data-fancybox-group="gallery" title="Bela Fleck"><img src="img/bf-2.jpg" alt="" class="vignette divers"/></a>
 
	    <a rel='diapo1' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><div class="work"><img src="2_b.jpg" alt="" class="vignette test2" />
        	    <div class="fond"></div>
	    <span>Test<br />Trois</span></div></a>
	    <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" class="vignette" /></a>
 
	    <a rel='diapo1' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img src="2_b.jpg" alt="" class="vignette test2" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" class="vignette" /></a>
</div></div>

Le résultat : première photo OK (span + opacité), deuxième photos absente (lien et span OK), la troisième photo va chercher les attributs (span et opacité) de la première photo du second diaporama dont voici de nouveau le code :

Code html :

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

1
2
3
4
5
6
	    <a rel='diapo1' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><div class="work"><img src="2_b.jpg" alt="" class="vignette test2" />
        	    <div class="fond"></div>
	    <span>Test<br />Trois</span></div></a>
	    <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" class="vignette" /></a>

Sur cette seconde galerie:
Première photo absente mais span (et liens) de la première photo du premier diaporama, seconde photo sans opacité ni span masi réactive, troisième photo : span et opacité OK. J'ai bien tenté de séparer le second diapo dans une <div id="diaporama2"> le résultat est pire

J'ai eu beau changer les classes "work" et "fond", tenté du .JS trouvé sur internet etc... aucun résultat

Du code inital
http://www.developpez.net/forums/d14...ybox-isoptope/
Je n'ai rajouté "pourtant" que ces CSS :

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
#diaporama {
    margin-bottom: 0px;
    overflow: hidden;
    margin-top: 0px;
}
 
#diaporama .work {
	overflow: hidden;
	width: 270px;
	height: 175px;
	position: relative;
	float: left;
}
 
#diaporama .work:hover {
    border: 0px solid #FFF;
}
 
#diaporama .work img {
 
}
 
#diaporama .work .fond {
	width: 270px;
	height: 175px;
	position: absolute;
	/* Voici le décalage du fond lorsqu'on n'est pas en :hover */
	background-image: url(../../../LDDC/img/fond.png);
	display: none;
}
 
#diaporama .work:hover .fond {
	/* Voici la position du fond lorsqu'on est en :hover */
		display: block;
}
 
#diaporama .work span {
	text-transform: uppercase;
	text-align: center;
	position: absolute;
	/* Voici la position du span lorsqu'on n'est pas en :hover */
	top: 105px;
	left: -280px;
	padding-left: 70px;
	padding-right: 8px;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	font: 20px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	background-color: #30F;
	color: #FFFFFF;
}
 
#diaporama .work:hover span {
	/* Voici la position du span lorsqu'on est en :hover */
    left: 8px;
}

Comme avec mon code, isotope est plus que perturbé, j'ai fais un test en ne laissant que la première galerie :
Première photo OK (span + opacité), deuxième photos absente (lien et span OK).
J'ai vraiment tenté bcp de choses avant de m'en remettre de nous à vous avec ce foutu diapo (dont je suis extrêmement fier); mais là, je suis autant perdu que mon code

AU SECOURS !!!

Merci pour votre aide et bonne fin de journée,
dh

**NoSmoking** · 24/01/2015, 11h04

Bonjour,
on se perd un peu dans ta prose, ne serait-il pas jouable d'avoir une page test en ligne ?

**dhillig** · 24/01/2015, 12h44

Bonjour NoSmoking,
Oui, pas évident d'être clair

Voici le lien de la page de base :
http://pasterencemaisbud.fr/ORIGINAL/original.html
Et le lien de la page avec Span et opacité :
http://pasterencemaisbud.fr/TEST/test.html
As-tu une idée du (gros) soucis ?
Merci pour ton aide et bon week-end,
dh

**NoSmoking** · 24/01/2015, 22h51

Les classes doivent être misent sur le conteneur de l'image et non sur l'image elle même.
Je crois que pour commencer il te faut revenir à une structure plus simple du type

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="isotope" id="diaporama">
  <a class="fancybox  vignette divers" href="img/kgbig.jpg" data-fancybox-group="gallery" title="Kenny Garrett">
    <img src="img/kg.jpg" alt="" />
    <span>La photo #1</span>
  </a>
  <a class="fancybox vignette divers" href="img/jcbig.jpg" data-fancybox-group="gallery" title="Jeff Coffin">
    <img src="img/jc.jpg" alt="" />
    <span>La photo #2</span>
  </a>
  <!-- la suite -->

ici on met un SPAN contenant le texte à apparaitre juste derrière l'image.

Concernant le CSS de ces éléments on peut faire de la sorte

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
/* ---- .vignette ---- */
.vignette {
  position: relative;
  float:left;
  display:block;
  overflow:hidden;
  height: 175px;
  width: 270px;
  border:5px solid transparent;
  text-align: center;
  padding: 0;
  margin: 0;
}
.vignette span{  /* concerne le texte à afficher */
  position:absolute;
  display:block;
  transition:all 0.3s ease-in-out;
  background:rgba( 0,0,0,0);
  width:100%;
  left: -100%;   /* rend invisible le texte */
  bottom:0;
}

Pour que celui ci apparaissent on va utiliser le :hover sur son conteneur via le CSS suivant (exemple)

Code :

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

1
2
3
4
5
.vignette:hover span{
  background:#ABC;
  background:rgba(170, 187, 204,0.5);
  left:0;   /* rend visible le texte */
}

L'effet sera dans ce cas une apparition par la gauche en bas de l'image.

Une autre technique consisterait à utiliser un élément crée via :before qui pourrait récupérer le contenu de l'attribut title par exemple mais celui ci ne pourra pas contenir de code HTML.

Je te mets néanmoins le CSS si cela te chantes, le principe étant le même que ci dessus.

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
/* autre méthode mais le HTML n'est pas pris en compte */
.vignette:before {
  content:attr(title) " ";
  position:absolute;
  display:block;
  transition:all 0.3s ease-in-out;
  background:rgba( 0,0,0,0);
  width:100%;
  left: -100%;
  bottom:0;
}
.vignette:hover:before{
  background:#ABC;
  background:rgba(170, 187, 204,0.5);
  left:0;
}

**dhillig** · 25/01/2015, 16h23

Slt NoSmoking,
MERCI !!! Cela marche super bien pour le premier diapo (divers) mais je ne vois pas comment restructurer le second (test2).
Dans le html ci dessous (code tiré par les cheveux je suppose

) la première image n'est pas redimenssionée et je n'ai plus la galerie (diapo_b, diapo_c...),mais le span est bien là :

Code html :

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

1
2
3
4
5
6
        <a rel='diapo1' class="diapo1 fancybox vignette test2" href="img/diapo_a.jpg" data-fancybox-group="gallery" title="Ma photo 1">
  <img src="2_b.jpg" alt="" />
  <span>Photo a</span></a>        			    
	    <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" class="vignette" /></a>

J'ai aussi perdu l'effet :hover sur "vignette" (un "vignette :hover" ne fonctionne pas), j'avais précédemment créer une classe .fond avec un background .png mais je pense que c'est loin d'être le meilleur moyen d'en faire un (?).
Merci pour ton aide/code grâce à laquelle j'avance encore, TOP !!!

Bonne fin de week-end,
dh

**NoSmoking** · 25/01/2015, 19h35

Cela marche super bien pour le premier diapo (divers) mais je ne vois pas comment restructurer le second (test2)

il te faut donc faire la même chose pour le 2^éme, je parle de la structure, ce qui n'est pas le cas de ce que l'on peut voir.

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="isotope" id="diaporama_2">
  <a rel='diapo1' class="diapo1 vignette test2" href="2_b.jpg" title="Ma photo 1">
    <img alt="" src="2_b.jpg" />
    <span>La photo #1</span>
  </a>
  <a rel='diapo1' class="diapo1 vignette test2" href="diapo_b.jpg" title="Ma photo 2">
    <img alt="" src="diapo_b.jpg"/>
    <span>La photo #2</span>
  </a>
  <!-- la suite -->

je rappelles que "Les classes doivent être misent sur le conteneur de l'image et non sur l'image elle même."

Le CSS indiqué devrait fonctionner pour les deux galerie.

**dhillig** · 25/01/2015, 21h55

Yes !!! Ça fonctionne !!!

Des classes manquantes ou inutilement présentes dans mes essais

, Je vais bosser le truc (comparer les codes) pour comprendre (un truc qui a l'air simple)

NoSmoking : "je rappelles que "Les classes doivent être misent sur le conteneur de l'image et non sur l'image elle même." "
OK !!! Pourquoi un .png en background pour une opacité

? Un

Code :

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

1
2
3
#diaporama :hover {
	opacity:0.8;
}

fait très bien l'affaire, non ? Merci de m'avoir remué les méninges NoSmoking

Reste le problème du second diaporama et de sa vignette non réduite. Avant, l'image apparaissait en vignette (donc réduite), maintenant l'image apparaît à 100% (top :0% left : 0%) dans l'espace reservé .vignette (270/175px).
J'ai beau regarder les CSS, je ne vois pas où intervenir

Mais bon, ma page test a bien évoluée en une journée et quelques lignes de code, THANKS !!!

Bonne soirée GREAT NoSmoking et MERCI !
dh

**dhillig** · 26/01/2015, 13h20

Slt NoSmoking,
Avec des vignettes à la bonne taille (270pxX175px), plus de problème

Merci de ne pas avoir laissé cette réponse à une question d'une stupidité déconcertante

Encore un IMMENSE MERCi et EXCELLENTE JOURNEE à toi

!!!
dh

**NoSmoking** · 27/01/2015, 22h09

Avant, l'image apparaissait en vignette (donc réduite), maintenant l'image apparaît à 100% (top :0% left : 0%) dans l'espace reservé .vignette (270/175px).

un simple

Code :

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

1
2
3
4
.vignette img{
  width:100%;
  border:none;  /* comme l'image est dans un lien */
}

devrait suffire à régler ce soucis

**dhillig** · 27/01/2015, 23h13

Slt NoSmoking,
Merci pour ta réponse

Le width:100% ne change rien, je ne comprends pas :p (mais ce n'est plus un soucis

même si j'aimerais comprendre)
Pour info : contrairement à ce que j'ai dis :

Avec des vignettes à la bonne taille (270pxX175px), plus de problème

, une image plus grande fait aussi l'affaire si elle est homothétique (il me semble).
Pour ce qui est du border:none, il était à 5px pour remplacer une marge. Pour le coup, les vignettes n'ont plus de marge/border et se retrouvent collées.
Mais encore une fois, ce n'est plus un soucis (THX NoSmoking

) Le tout fonctionne parfaitement !!!
Par contre, qq soucis au niveau de l'intégration de ces codes dans une autre page...
Surement qq prochaines discussions à lancer

Encore MERCi NoSmoking et bonne soirée,
dh

Figcaption et hover sur diaporama

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager