Galeries Fancybox dans des fenêtres différentes.

**dhillig** · 07/01/2015, 19h01

Bonjour à tous,
J'ai actuellement sur une page test quatre galeries : galerie1, diaporama_1, galerie 2, diaporama_2
Serait-il possible de les faire apparaître dans une fenêtre à part (une fenêtre pour chaque galerie/diaporama), avec un calque opaque (avec texte) sur chaque :hover
Par crainte de ne pas être explicite cette vidéo (avec galeries Fancybox) :
https://www.youtube.com/watch?v=tzHr...ature=youtu.be
Puis-je repartir de mon body, ou dois-je recommencer les diaporamas (qui ne sont que fictifs actuellement) ?

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
<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>