ColorBox ne se charge pas - tout JS se déroule correctement

Question

J'ai essayé de configurer une palette de couleurs (lorsque vous cliquez sur le bouton 'Inscrivez-moi'), mais elle ne semble pas démarrer. Impossible de trouver des erreurs javascript ou des erreurs de console, ne semble pas se déclencher.

J'ai lié la feuille de style, le fichier JS et inclus le script d'en-tête, ils s'ouvrent tous correctement et sont correctement appelés dans la page. J'ai créé le contenu div inline (caché) et lié le bouton correctement.

<span class="btn"><a href="#inline_content">Sign Me Up!</a></span> 

Et voici le contenu en ligne:

<div style='display:none'> 
    <div id='inline_content' style='padding:10px; background:#fff;'> 
    <p><strong>This content comes from a hidden element on this page.</strong></p> 
    <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p> 
    </div> 
</div> 

Live site demo

Answer 1

Tous les sélecteurs dans votre code sont cassés. Essayez ce code:

<span class="btn"><a class="callbacks" href="#inline_content">Sign Me Up!</a></span> 

Et jquery:

$(document).ready(function(){ 
    $(".callbacks").colorbox({ 
     inline:true, 
     onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
     onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
     onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
     onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
     onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
    }); 
}); 

Démo: http://jsfiddle.net/a4urV/

Answer 2

Essayez de mettre la classe .inline sur le lien que vous souhaitez ouvrir le colorbox.

<span class="btn"><a href="#inline_content" class="inline">Sign Me Up!</a></span> 

qui utilisera cette instanciation colorbox:

$(document).ready(function(){ 
    $(".inline").colorbox({inline:true, width:"50%"}); 
}); 

Vous n'avez pas besoin d'avoir tous ces callbacks pour charger colorbox, donc je recommande d'utiliser cette instanciation colorbox (de .inline) plutôt que la .callbacks un.

• Chris

EDIT:

À partir de ce moment, votre jQuery est invalide, l'amenant à briser:

<script> 
     $(document).ready(function(){ 
    $(".callbacks").colorbox({ 
     inline:true, 
     onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
     onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
     onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
     onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
     onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
    }); 
}); <-- Extra closing tag 
     }); <-- Extra closing tag 

     //Example of preserving a JavaScript event for inline calls. 
     $("#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> 

Je recommande pour des raisons de simplicité et pour corriger vos erreurs, pour remplacer tout ce code par ce qui suit:

<script> 
    $(document).ready(function(){ 
     $(".inline").colorbox({inline:true, width:"50%"}); 
    }); 
</script> 

et ajoutez class = « en ligne » à votre lien, et il fonctionne comme un charme =]