Magento News

 

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!

How do I debug a custom Colorbox installation for Magento

Possibly Related Posts:


 

Leave a Reply