no option images in catalog

I am attaching an updated uc_option_image.js file.

I found the problem to be with the way the DOM was being parsed, at least on my site. I hope this helps folks. Here are the specific pieces I modified to get this to work...

/**
 * Switch an option image.
 */
UCOI.switchImage = function(aid, input, size) {
//  Fixed this Line
  var pid = input.parentNode;
//Fixed This Line  
var nid = input.form.form_id.id;
//Added this line
nid = nid.slice(nid.lastIndexOf("-",1)-1,nid.length);

  var oid = $(input).val(); 
// Changed this line
var image = $(input).parents('.content').find('img.uc-option-image');       
          
  // Make sure we have permission to switch this attribute
  if (this.attributes[aid] === 0){
    return;
  }
          
  try {          
    var images = this.images[nid][aid];
    
    if (images[oid].derivative){ 
      this.switchImageEffect(image, images[oid].derivative);
    } 
  }
  catch (e){   
    this.switchImageEffect(image, this.noimage); 
  }
};

Sorry if I posted this in the wrong place...

Thanks for uploading that. What that did for me was make it reload the "No Image" text but it didn't actually load the uploaded pic I had. It's a point in the right direction though.

I'm having the exact same issues. It looks perfect up until you actually view the product page, then just "No Image." I've already:

• disabled the Ubercart Image support (result: no change)
• check/rechecked the ImageCache settings (result: no change)
• uploaded the new js file from aove (result: no change)
• made the "slash" edit to the js paths (result: no change)

Any help is very much appreciated.

I was also having a similar problem, and managed to fix it.

The problem for me was this line in the javascript file (where "$(this)" is the image object that we are trying to change):
$(this).attr('src', imagepath).fadeIn(200);

That line of code looks like it is setting the "src" attribute of the image. imagepath was something like "sites/default/files/option-images/mypic.jpg"-- a relative URL. My guess is that when you set the "src" to a relative URL, it treats it as if you are clicking a relative link.

The problem is that the page I was viewing at the time was "http://www.mysite.com/node/20". So after executing this line in the javascript file, the image's URL was switched to http://www.mysite.com/node/sites/default/files/option-images/mypic.jpg

So I simply edited it to read:
$(this).attr('src', "/" + imagepath).fadeIn(200);

Note that I also incorporated some of the fixes from @KiwiGod, above in the first comment. I'll attach the resulting file.

(One other problem I was having is that it seems to want to load the "noimage" image from the module, not the theme, and it is getting it from the wrong directory. So I made an "images" dir in the module, and copied the "noimage" image in there too. A hack, but it works.)

I found and fixed one more problem with this. I found that it was working, until I started having 3-digit node-IDs, and then it was failing. I traced the problem to this line of javascript, which was attempting to get the node id from a form element label:

var nid = input.form.form_id.id;
nid = nid.slice(nid.lastIndexOf("-",1)-1,nid.length);

And I fixed it by changing to this:

var nid = input.form.form_id.id;
nid = nid.substr(nid.lastIndexOf("-")+1);

The complete, revised file is attached. (Be sure to rename it back to "uc_option_image.js".)