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
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>
Pour la ligne 27 du dernier code, comment faire pour que toutes les photos s'affichent et non simplement la photo une du diaporama ?
Meci beaucoup pour votre aide,
dh