How do I debug a custom Colorbox installation for Magento

I wanted to have a Colorbox (http://jacklmoore.com/colorbox/) lightbox that would display product images in a mini gallery for static pages.

I installed colorbox onto Magento:

JS

• /skin/frontend/{custom}/default/js/colorbox.inline.js

• (for the inline script that is in the head on the examples)

• /skin/frontend/{custom}/default/js/jquery.colorbox.js

CSS - /skin/frontend/{custom}/default/css/colorbox.css

Images - /skin/frontend/{custom}/default/images/...

I updated the XML of the page in the backend under 'Custom Layout Update XML' as follows:

skin_csscss/colorbox.css skin_jsjs/jquery/jquery.1.6.min.js skin_jsjs/jquery/jquery.colorbox.js skin_jsjs/jquery/colorbox.inline.js

When I click on the colorbox class links to test, the image opens in the same tab, but as an external file. I set up a local file that references the same images, and references the JS and CSS files that I'm using for Magento, and the lightbox works.

I'm a bit perplexed with what's going on so any tips, ideas, and advice is most welcome.

Cheers!

This is what you need. Move you javascript files to /js/colorbox/jquery.colorbox.js /js/colorbox/colorbox.inline.js

<reference name="head">
    <action method="addJs"><script>colorbox/jquery.colorbox.js</script></action>
    <action method="addJs"><script>colorbox/colorbox.inline.js</script></action>
</reference >

This will get you javascript files to load. see the page.xml file to see how to load css files from the skin folder.