Question

Ive recently been making structure and style edits to http://washingtongraphic.com/logo-design.html and found that the colorbox plugin no longer works. When you roll over each logo, it should pop-up to a larger size and go back to its normal state when you roll out. In addition, when clicked, it should appear in the colorbox window… this also does not work. All of the links to the scripts and other resources appear to be correct, but for some reason, the script is not triggered on roll-over and the colorbox window also does not appear when clicked. A functional example (of how it should be working) can be found here: http://washingtongraphic.com/annual-reports.html. Im not very good at debugging javascript yet and can really use all of the help I can get. I have been using firebug but am not sure how to tell where the script is failing. Thank you all in advance.
Also, I did not create this site but am merely editing it… its not how I would have built it (I know there are some other structure issues here!)

Answer 1

The issue is the load order of trialbyfire.js and trialbygallery.js.

Make sure they’re loaded in this order (you have them reversed on the logo-design page):

<script src="js/trialbygallery.js" type="text/javascript"></script> 
<script src="js/trialbyfire.js" type="text/javascript"></script> 

Additionally, to fix this error, you have two choices:

Uncaught TypeError: Object #<Object> has no method 'scrollable' on trialbyfire.js:89

1. Remove:

   // Mousewheel
   // execute your scripts when DOM is ready. this is a good habit
   $(function() {

   // initialize scrollable with mousewheel support
   $(".scrollable").scrollable({ vertical: true, mousewheel: true });  
   

   });

2. Fix the ‘scrollable’ dependency. Likely a plugin that should be loaded, but isn’t.