plugin ColorBox, erreur à la fermeture

Version imprimable

03/08/2010, 10h40
captain_kud

plugin ColorBox, erreur à la fermeture

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.
04/08/2010, 16h52
captain_kud

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... :marteau:
05/08/2010, 20h55
gtraxx

Je pense qu'avec le code de configuration de votre colorbox on pourra vous aider plus facilement :mrgreen:
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

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:

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.

06/08/2010, 13h26
gtraxx
Pourquoi appelé les deux js :
Code:

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 ;)
11/08/2010, 10h15
captain_kud

Grrr ça ne fonctionne toujours pas... :koi:

J'ai donc enlevé un appel :

Code:

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

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

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:

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

12/08/2010, 23h41
captain_kud

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
13/08/2010, 10h44
llaffont

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 :calim2:
15/08/2010, 17h48
gtraxx

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:

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

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

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:

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!