So here is a step by step of how you can add Jquery to your Cubecart 4 based site (interestingly, Cubecart 5 is using Jquery rather than Protoype/Mootools) and amend the Cubecart templates to use a Jquery lightbox instead of the default:
2. Save jquery to the JS folder of your Cubecart site. I also renamed mine from ‘jquery-1.4.min.js’ to simply ‘jquery.js’.
3. Download Lightbox and extract the ‘jquery.lightbox.min.js’ from the JS folder of the archive into the JS folder of your Cubecart installation (it’s in the root). Rename the file to ‘jquery.lightbox.js’ for simplicity.
4. Now extract the jquery.lightbox.packed.css file from the CSS folder of the Jquery Lightbox archive to the CSS folder of your Cubecart skin which will be like so: ‘skins/your skin/styleSheets’. For simplicity rename the file to simply jquery.lightbox.com
5. Within the ‘skins’ folder of Cubecart, within your skin, browse to ‘styleTemplates’ > ‘global’ and open index.tpl
By default (for example with the Carreta-Bright skin), line 17-19 are this:
Replace those lines with the following:
6. You will also need to change the style sheets so amend the following line:
So the other libraries won’t get loaded now and we have also added the stylesheet for the new Lightbox plugin.
7. By default the ‘next’ and ‘previous’ images of the Jquery lightbox effect live in an ‘images’ folder at the same level as the ‘JS’ folder. Therefore, extract all four images from the ‘images’ folder of the Jquery Lightbox archive into the ‘images’ folder in the root of your Cubecart installation.
8. Now open ‘viewProd.tpl from the skins/your skin/styleTemplates/content folder of your Cubecart installation.
9. Around line 21, change the following line of code:
This is the call for the new Jquery based Lightbox.