Figcaption et hover sur diaporama
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 :roll:
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:
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:
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:
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 :weird:
AU SECOURS !!! :calim2:
Merci pour votre aide et bonne fin de journée,
dh
