plugin ColorBox, erreur à la fermeture

**captain_kud** · 03/08/2010, 11h40

Bonjour,

J'ai intégré dans un petit site une lightbox en jQuery qui se nomme ColorBox. Tout fonctionne bien sauf qu'un problème apparait souvent après la fermeture de cette ColorBox... Une fois que l'on a cliqué pour la fermer, tous les liens de ma page ne sont plus actifs (alors qu'ils l'étaient avant l'ouverture), ils ne fonctionnent plus. Il faut alors actualiser la page pour que tout remarche.

La chose encore plus étonnante c'est que ce problème est aléatoire. C'est à dire que des fois ça fonctionne correctement, la ColorBox se ferme et les liens sont toujours actifs mais si on la ré-ouvre et referme, le problème peut survenir ou pas, ça dépend des fois

.

A votre avis de quoi peut venir ce problème et comment le résoudre ?

Merci d'avance pour vos réponse.

**captain_kud** · 04/08/2010, 17h52

J'ai l'impression que le problème n'apparait pas sur Opéra et Chrome. Par contre il est bien présent sur Firefox, IE et Safari...

**gtraxx** · 05/08/2010, 21h55

Je pense qu'avec le code de configuration de votre colorbox on pourra vous aider plus facilement

J'utilise colorbox depuis pas mal de temps sans aucun problème de ce genre, il faut absolument avoir la version de votre colorbox ainsi que votre version de jQuery en oubliant pas le code

Bien à vous
aurélien

**captain_kud** · 06/08/2010, 11h17

Version de la colorbox : 1.3.8 (télécharger sur http://colorpowered.com/colorbox/)
Version de jQuery : 1.4.2

Extrait 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
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<link media="screen" rel="stylesheet" href="css/colorbox.css"/>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".colorbox").colorbox();
		$("#click").click(function(){ 
			$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
			return false;
		});
	});
</script>
 
</head>
 
<body>
	<div id="container">
    	<div id="menuLeft">
        	<ul>
			<li><a id="journalisme" class='colorbox' href="content/journalisme.html" ><img src="images/menuLeftJournalismeHover.png" alt="journalisme" title="journalisme"/></a></li>
			<li><a id="communication" class='colorbox' href="content/communication.html"><img src="images/menuLeftCommunicationHover.png" alt="communication" title="communication"/></a></li>
			<li><a id="creations" class='colorbox' href="content/creations.html"><img src="images/menuLeftCreationsHover.png" alt="creations" title="creations"/></a></li>
		</ul>
        </div>
</body>
</html>

Voilà, n'hésitez pas à me dire si j'ai oublié (ou mal fait) quelque chose.

**gtraxx** · 06/08/2010, 14h26

Pourquoi appelé les deux js :

Code :

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

1
2
3
 
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

Pour ce qui est du code, je vous conseil de ne pas utilisé une classe du nom de colorbox (réservé).
Une fois les deux problème règlé, vous aurez un affichage normal

**captain_kud** · 11/08/2010, 11h15

Grrr ça ne fonctionne toujours pas...

J'ai donc enlevé un appel :

Code :

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

<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

Et j'ai remplacé le nom de la classe "colorbox" par "affichage_colorbox"...

**gtraxx** · 12/08/2010, 00h15

Je viens de tester chez moi avec la version 1.3.9 sans aucun problème sous chrome !!
quel est votre version de Chrome ?
Essayé avec ceci :

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<link media="screen" rel="stylesheet" href="css/colorbox.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".imgbox").colorbox({iframe:true, innerWidth:500, innerHeight:400});
	});
</script>
 
</head>
 
<body>
	<div id="container">
    	<div id="menuLeft">
        	<ul>
			<li><a id="journalisme" class='imgbox' href="content/journalisme.html" ><img src="images/menuLeftJournalismeHover.png" alt="journalisme" title="journalisme"/></a></li>
			<li><a id="communication" class='imgbox' href="content/communication.html"><img src="images/menuLeftCommunicationHover.png" alt="communication" title="communication"/></a></li>
			<li><a id="creations" class='imgbox' href="content/creations.html"><img src="images/menuLeftCreationsHover.png" alt="creations" title="creations"/></a></li>
		</ul>
        </div>
</body>
</html>

Au pire si un lien est disponible je regarderai le comportement sous tous les navigateurs qui pose problème
Au plaisir

**captain_kud** · 13/08/2010, 00h41

Moi aussi ça fonctionne sous Chrome, et aussi sous Opera. Ça ne fonctionne pas sous Safari, IE et Firefox.
Le site est visible à l'adresse suivante : The Right Place

**llaffont** · 13/08/2010, 11h44

j'ai usé tes lien "Scénarios" et "Communication" entre autre à force de cliquer dessus.
Mais tous fonctionnent j'ai même actualisé la page plusieurs fois.

Je suis sous FF. Je ne trouve pas de problème

**gtraxx** · 15/08/2010, 18h48

Sous FF pas de problème mais sous safari je vois bien les liens qui se désactive.
Vérifier bien s'il n'y à pas une incompatibilité avec un autre plugin (peut être avec interface) ou encore un return false mal placé.
Tester mon script pour vos pages externe :

Code :

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

$(".linkbox").colorbox({iframe:true, innerWidth:500, innerHeight:400});

Je pense que le bug peut être réglé rapidement

**romanodev** · 13/10/2010, 16h30

Bonjour,

Je viens de tester et cela bug également de temps en temps (à force de cliquer) sur FF 3.6.
Je pense aussi que cela vient d'interface, essaye de le mettre avant et/ou de le supprimer.

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript" src="js/interface.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
         $(document).ready(function(){
                 $(".exemple").colorbox();
         });
</script>

Bonne journée!

plugin ColorBox, erreur à la fermeture

jQuery

Discussions similaires

Partager

Partager