Bonjour à tous,
Je tente d'adapter Isotope au code ci-dessous
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
31
32
33
34
35
36
37
38
39
40
41
42 <body> <h3>Marcus Miller</h3> <div id='gallery1'> <p> <a rel='diapo1' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img alt="" src="img/diapo_a.jpg" /></a> <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" /></a> <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" /></a> <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" /></a> <p> <a rel='diapo2' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img alt="" src="img/diapo_a.jpg" /></a> <a rel='diapo2' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" /></a> <a rel='diapo2' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" /></a> <a rel='diapo2' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" /></a> </p> </p></div ><div id="diaporama_1"><p> <a class="fancybox" href="images/img-ex1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="../../LDDC/img/2.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" width="100" class="img img_last" /></a> </p></div> <div id='gallery2'> <p> <a rel='diapo3' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img alt="" src="img/diapo_a.jpg" /></a> <a rel='diapo3' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" /></a> <a rel='diapo3' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" /></a> <a rel='diapo3' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" /></a> </p></div ><div id="diaporama_2"><p> <a class="fancybox" href="images/img-ex1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="../../LDDC/img/2.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" width="100" class="img img_last" /></a> </p></div> ></body>
J'y suis depuis un moment, et donc je laisse tomber provisoirement les transitions/figcaptions. Je souhaiterais juste arriver à ce que telle galerie soit affichée uniquement si son lien est cliqué. Soit une "barre des menus" contenant deux liens "test1" et "test2" suivent à ce "menu" 4 galeries liées à un des deux menus. Pour le moment, rien est actif :/
Voici l'actuel html
Pour la ligne 27 du dernier code, comment faire pour que toutes les photos s'affichent et non simplement la photo une du diaporama ?
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
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 <nav id="filter" data-option-key="filter"> <a data-filter=".test_1">test_1</a> | <a data-filter=".test_2">test_2</a> | </nav> <ul id="elements" class="grid"> <li class="test_1"> <figure> <div id='gallery1'> <p> <a rel='diapo1' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img src="img/diapo_a.jpg" alt="" class="diapo1 img" /></a> <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" /></a> <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" /></a> <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" /></a><a rel='diapo2' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img src="img/diapo_a.jpg" alt="" class="diapo1 img" /></a> <a rel='diapo2' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" /></a> <a rel='diapo2' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" /></a> <a rel='diapo2' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" /></a> </p></div> <figcaption> <h3>Test</h3> <span>test1</span> </figcaption> </figure> </li> <li class="test_2"> <figure> <div id="diaporama_1"><p> <a class="fancybox" href="images/img-ex1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="../../LDDC/img/2.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" width="100" class="img img_last" /></a> </p></div> <figcaption> <h3>test</h3> <span>test_2</span> </figcaption> </figure> </li> <li class="test_1"> figure> <div id='gallery2'> <p><a rel='diapo3' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" /></a> <a rel='diapo3' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" /></a> <a rel='diapo3' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" /></a> </p></div> <figcaption> <h3>Test</h3> <span>test1</span> </figcaption> </figure> </li> <li class="test_2"> <figure> <div id="diaporama_2"><p> <a class="fancybox" href="images/img-ex1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="../../LDDC/img/2.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" width="100" class="img img_last" /></a> </p></div> <a class="fancybox" href="images/img-ex1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="../../LDDC/img/2.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" width="100" class="img" /></a> <a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" width="100" class="img img_last" /></a> </p></div> <figcaption> <h3>Test</h3> <span>test_2</span> </figcaption> </figure> </li></ul> </section>
Meci beaucoup pour votre aide,
dh
Partager