best practice for Jquery plugin implementation and resource locations

Question

This is probably a very basic question, but I seem to have issues plugging in jquery plug-ins. The issue seems to be around the location of the script, css and images and ensuring the css has the correct url to the images.

The standard plug-in has the following folder structure (eg : JPicker)

• js
• css
• images

My project is asp.net mvc so I have the default:

• scripts
• images
• content

So, I try to split the jquery plugin to the appropriate folders (not sure if this is the best way?). Then I try to correct the references to images (background urls) in the css. I believe the url is relative to the page that is implementing the css file, not the location of the css file itself.

Anyway, when I try the above, the plugins don't seem to work. I believe the issue lies with the images not being found. The jquery code runs without errors, so I assume that's not the problem.

Any help/advice much appreciated

Answer 1

In CSS, the images need to be be in relation to the CSS file, so that will fix other plugins. But...this isn't the problem with jPicker specifically. For some reason, that plugin references the files directly in the .js. It has a hard coded images path you can find in the code here:

clientPath: '/jPicker/images/'

To override this, when you call jPicker, set the path like this:

$('#myPicker').jPicker({images:{clientPath:'/images/'}}); 

Answer 2

Hello ptutt,

This is Chris Tillman, the developer of the jPicker plugin. I wanted to respond as to why the script references the files with the clientPath option.

The reason the files are referenced directly instead of just using the included CSS files is for IE5.5/6. They do not support translucency without the use of a filter, and I need the file path to the images to set the filter. If I could eliminate that, then it could be linked from the CSS file.

I always recommend using an absolute path for the clientPath, because in JavaScript, when I get those image locations, they will be in relation the running page, and not in relation to the JS file. This means if you were using relative paths and had two pages in different locations, you would need two copies of the images.

You can however split up the css and image files, and point the clientPath to the image folder. I don't use the clientPath to see any css or js files. Just reference the correct location for CSS and JS in your page, and set the clientPath to the folder where the images are.