ColorBox : Problème après fermeture

Fermé
kuddy - Modifié par kuddy le 21/07/2010 à 15:50
 moi - 11 oct. 2011 à 14:57
Bonjour,

Je suis actuellement en train de développer un petit site et j'ai intégré 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. C'est un peu "t'as une chance sur deux"...

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

Merci d'avance pour vos réponse.

4 réponses

Personne n'a une idée ? :(
0
Please help...
0
varfendell Messages postés 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 699
27 juil. 2010 à 13:23
Tu peut nous mettre le code de ta page avec ta "colorBox" entre les balise code pour que ça soit lisible s'il te plait
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Be @ The Right Place</title>

<link rel="stylesheet" href="css/main.css" type="text/css"/>
<link media="screen" rel="stylesheet" href="css/colorbox.css"/>
<link rel="stylesheet" href="css/content_colorbox.css" type="text/css"/>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">


<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/interface.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>
        <div id="menuRight">
        	<ul>
				<li><a id="horlogerie" class='colorbox' href="content/horlogerie.html"><img src="images/menuRightHorlogerieHover.png" alt="horlogerie" title="horlogerie"/></a></li>
				<li><a id="afrique" class='colorbox' href="content/afrique.html"><img src="images/menuRightAfriqueHover.png" alt="afrique" title="afrique"/></a></li>
				<li><a id="voyage" class='colorbox' href="content/voyage.html"><img src="images/menuRightVoyageHover.png" alt="voyage" title="voyage tourisme"/></a></li>
				<li><a id="sante" class='colorbox' href="content/sante.html"><img src="images/menuRightSanteHover.png" alt="sante" title="sante bien etre"/></a></li>
				<li><a id="redaction" class='colorbox' href="content/redaction.html"><img src="images/menuRightRedactionHover.png" alt="redaction" title="redaction"/></a></li>
				<li><a id="musique" class='colorbox' href="content/musique.html"><img src="images/menuRightMusiqueHover.png" alt="musique" title="musique"/></a></li>
				<li><a id="custom" class='colorbox' href="content/custom.html"><img src="images/menuRightCustomHover.png" alt="custom publishing" title="custom publishing"/></a></li>
				<li><a id="editions" class='colorbox' href="content/editions.html"><img src="images/menuRightEditionsHover.png" alt="editions musicales" title="editions musicales"/></a></li>
                <li><a id="product" class='colorbox' href="content/product.html"><img src="images/menuRightProductHover.png" alt="product" title="product"/></a></li>
				<li><a id="evenementiel" class='colorbox' href="content/evenementiel.html"><img src="images/menuRightEvenementielHover.png" alt="evenementiel" title="journalisme"/></a></li>
				<li><a id="reseautage" class='colorbox' href="content/reseautage.html"><img src="images/menuRightReseautageHover.png" alt="reseautage" title="reseautage"/></a></li>
				<li><a id="relations" class='colorbox' href="content/relations.html"><img src="images/menuRightRelationsHover.png" alt="relations publiques" title="relations publiques"/></a></li>
               	<li><a id="bureau" class='colorbox' href="content/bureau.html"><img src="images/menuRightBureauHover.png" alt="bureau" title="bureau d'ecriture"/></a></li>
				<li><a id="scenarios" class='colorbox' href="content/scenarios.html"><img src="images/menuRightScenariosHover.png" alt="scenarios" title="scenarios"/></a></li>
				<li><a id="prowatch" class='colorbox' href="content/prowatch.html"><img src="images/menuRightProwatchHover.png" alt="association ProWatCH" title="association ProWatCH"/></a></li>
				<li><a id="projo" class='colorbox' href="content/projo.html"><img src="images/menuRightProjoHover.png" alt="association ProJo-Org" title="association ProJo-Org"/></a></li>
			</ul>
        </div>
        
        <div id="dock">
            <div class="dock-container">
                <a class="dock-item" href="http://www.therightplace.ch/therightplace/" target="_blank"><img src="images/logos/therightplace.png" alt="the right place" /><span>Afters Work</span></a> 
                <a class="dock-item" href="http://www.tagpress41.info/" target="_blank"><img src="images/logos/tag.png" alt="TaG press" /><span>Press Agency</span></a> 
                <a class="dock-item" href="http://therightplace.canalblog.com/" target="_blank"><img src="images/logos/trp.png" alt="@TRP" /><span>Dpt RP</span></a> 
                <a class="dock-item" href="http://www.bloghorloger.ch/" target="_blank"><img src="images/logos/bloghorloger.png" alt="blog horloger" /><span>Horlogerie Suisse</span></a> 
                <a class="dock-item" href="http://jshandmore.canalblog.com/" target="_blank"><img src="images/logos/jsh.png" alt="journal suisse horlogerie" /><span>JSH'Blog</span></a> 
                <a class="dock-item" href="http://www.lionsprod.com/" target="_blank"><img src="images/logos/lions.png" alt="lions production" /><span>Musique &amp; Ciné</span></a> 
                <a class="dock-item" href="http://forleaders.afrikblog.com/" target="_blank"><img src="images/logos/forleaders.png" alt="for leaders" /><span>Africa Business Mag</span></a> 
                <a class="dock-item" href="#" target="_blank"><img src="images/logos/vmandco.png" alt="VM and Co" /><span>VM &amp; Co Watches</span></a> 
                <a class="dock-item" href="#" target="_blank"><img src="images/logos/grandjean.png" alt="grandjean" /><span>Grandjean Watches</span></a> 
                <a class="dock-item" href="#" target="_blank"><img src="images/logos/horlogefleurie.png" alt="horloge fleurie" /><span>Horloge Fleurie GE</span></a> 
                <a class="dock-item" href="#" target="_blank"><img src="images/logos/prowatch.png" alt="prowatch" /><span>Culture horlogère</span></a> 
                <a class="dock-item" href="#" target="_blank"><img src="images/logos/projo.png" alt="projo.org" /><span>Editions, Productions</span></a> 
                <a class="dock-item" href="http://nashandmore.afrikblog.com/" target="_blank"><img src="images/logos/nash.png" alt="nash" /><span>Nash'Official Blog</span></a>
                <a class="dock-item" href="http://dardaif.canalblog.com/" target="_blank"><img src="images/logos/dardaif.png" alt="dar daif" /><span>Dar Daif</span></a>
                <a class="dock-item" href="http://bedingeneva.canalblog.com/" target="_blank"><img src="images/logos/bedingeneva.png" alt="bed in geneva" /><span>Bed in Geneva</span></a>
            </div>
		</div>
         

       </div>
       
       <div id="banniere">
       		<a id="lienBanniereGauche" href="https://pilo-watches.com/" target="_blank"><img src="images/bannieres/banniere_pilo_468x60.png" alt="pilo and co"/></a>
            <a id="lienBanniereDroite" href="http://www.duovisual.ch/visual2/" target="_blank"><img src="images/bannieres/banniere_duo_visual_468x60.png" alt="duo visual"/></a>
       </div>
        <!--dock menu JS options -->
	<script type="text/javascript">
        
        $(document).ready(
            function()
            {
                $('#dock').Fisheye(
                    {
                        maxWidth: 30,
                        items: 'a',
                        itemsText: 'span',
                        container: '.dock-container',
                        itemWidth: 40,
                        proximity: 90,
                        halign : 'center'
                    }
                )
            }
        );
    
    </script>
       

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

</body>
</html>


Voilà tout le code de ma page. Sur chaque lien ou je souhaite voir apparaitre la colorbox, j'appelle la classe "colorbox".
0
A tout hasard... Quelqu'un aurait il une solution ?
0
Il semblerait que ce "bug" n'apparait pas sur Opéra et Chrome mais il est présent sur Firefox, IE, et Safari.
0
le fait qu'il y ai deux appel à la librairie n'y est pas pour quelque chose
0