Discussion :

[OrionBass]

Bonjour à tous,
je suis en train de programmer un site et j'ai besoin d'une galerie pour les images.

J'utilise jQuery pour le javascript ainsi que le plugin lightbox. J'ai donc fait une fonction "afficher/masquer" dans laquelle se trouve ma "galerie" (mon site).

Comme vous pouvez le constater, quand on clique sur une image, celle-ci s'affiche bien dans la fenêtre de la lightbox, mais le tout derrière la vidéo !
J'ai passé un petit moment à chercher et je ne trouve vraiment pas ...
J'ai déjà essayé avec les z-index mais sans succès.
Petite précision : le lien de la vidéo est un iframe.

Voici un bout de mon code :

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
<script type="text/javascript">
				$(document).ready(function() {
					$("#bande").click(function() {
						$("#to_hide").slideToggle("slow");
					});
				});
			</script>
 
			<img id="bande" style="none" src="../images/bande_multimedia.png" alt="bande" />
			<div id="to_hide" style="display:none;">
				<br />
				<div id="video">
					<center>
						<?php echo $donnees['video']; ?>
					</center>
				</div>
 
				<br />
 
				<script type="text/javascript">
					$(function() {
						$('#gallery a').lightBox();
					});
				</script>
 
				<div id="gallery">
					<center>
					<table>
					<tr>
						<td><a href="<?php echo $donnees['image1']; ?>"><img src="<?php echo $donnees['image1']; ?>" alt="<?php echo $donnees['image1']; ?>" width="200" height="150" /></a></td>
						<td><a href="<?php echo $donnees['image2']; ?>"><img src="<?php echo $donnees['image2']; ?>" alt="<?php echo $donnees['image2']; ?>" width="200" height="150" /></a></td>
						<td><a href="<?php echo $donnees['image3']; ?>"><img src="<?php echo $donnees['image3']; ?>" alt="<?php echo $donnees['image3']; ?>" width="200" height="150" /></a></td>
					</tr>
					</table>
					</center>
				</div>
			</div>

Voilà, si quelqu'un pouvait me donner une piste ...
Cordialement

[danielhagnoul]

Bonsoir

Je viens de regarder votre page, tout s'affiche et se déroule correctement avec Chrome 11 et Firefox 4. C'est IE 9 qui pose problème. Il est bien connu qu'IE et iframe ne s'aime pas bien.

Idée, incorporer la vidéo directement dans la page ou cacher l'iframe avec la méthode hide() à l'ouverture de la "lightbox" et la rendre visible avec un show() à la fermeture de la visionneuse de diapositives.

[OrionBass]

Merci d'avoir répondu

Effectivement, vous avez raison pour firefox 4, l'agrandissement des images marche bien.
Sa ne marche pas sous ie9 mais sa ne fonctionne pas non plus avec chrome 11 pour moi ... l'affichage de l'image agrandie se fait bien derrière la vidéo (iframe).

Je ne peut inclure la vidéo directement dans la page vu que j'utilise une page "par défaut" pour toutes mes séries et je récupère les infos de chaque série dans la bdd.
J'ai aussi pensé comme vous, cacher l'iframe avec hide() à l'ouverture de la lightbox. Il faut que je regarde sérieusement, j'avais essayé rapidement sans succès ...
Désolé mais auriez vous un exemple sur la façon de mettre ce système en place ? Merci

[danielhagnoul]

Bonjour

Je suggère de remplacer votre : $('#gallery a').lightBox();.

par :

Code :

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

1
2
3
4
5
6
7
$('#gallery a').click(function(){
   $("#video").fadeOut();
}).lightBox();
 
$('#jquery-lightbox').live("focusout", function(){
    $("#video").fadeIn();
});

Mais n'ayant aucun moyen de tester, c'est sans garantie.

Sans vouloir être désagréable, permettez-moi de vous dire que vos scripts sont dispersés et brouillons. Tant mieux si cela fonctionne, mais ce n'est pas l'optimum.

[casimirslyt]

Bonjour, apparemment les utilisateurs de mon site ont un problème similaire, la lightbox comprenant un formulaire de contact vient se cacher sous le tchat présent sur le site.
Personnellement je n'ai pas ce problème là, mais est il possible de le résoudre ?
Merci pour vos réponses