Question

Trying to track down an bad image replacement error. An image of a different size pops in the original img source.

Unfortunately, on my PC, regardless of browser (Firefox, chrome, safari) the error is ‘silent’ and doesn’t cause the problem.

However, tracking it with firebug and chrome tools, seems to show that it is because of a ‘Node was not found’ error in Firefox (chrome: “NOT_FOUND_ERR: DOM Exception 8” )

This should be all standard code from jigoshop, a WordPress plug-in. It could be because whoever put the images in the first place, didn’t understand the relationship of the image sizes.

In any case, it is breaking here:

document.body.removeChild(this.node);

About 13 lines down here (line 653 in jquery.jqzoom-core.js)

this.fetchdata = function () {
var image = $(this.node);
var scale = {};
this.node.style.display = 'block';
$obj.w = image.width();
$obj.h = image.height();
$obj.pos = image.offset();
$obj.pos.l = image.offset().left;
$obj.pos.t = image.offset().top;
$obj.pos.r = $obj.w + $obj.pos.l;
$obj.pos.b = $obj.h + $obj.pos.t;
scale.x = ($obj.w / smallimage.w);
scale.y = ($obj.h / smallimage.h);
el.scale = scale;
document.body.removeChild(this.node);
$('.zoomWrapperImage', el).empty().append(this.node);
//setting lens dimensions;
lens.setdimensions();
};

the node it can’t find is: , which is found after loaded html here:

<div class="zoomWrapperImage" style="width: 100%; height: 496px;">
<img style="position: absolute; border: 0px none; display: block; left: -5000px; top: 0px;" src="http://xyz.com/shop/wp-content/uploads/2011/10/go-291x496.jpg">consoleName="jQuery.data"consoleKind="Element"consoleFramework="jQueryUI-1"consoleId="73"
</div>

I have delved into jquery too much. So, 2 questions:

1. How to fix this exact problem?
2. What is a general process of fixing these type of errors?

Answer 1

I’ve found a workaround. I wouldn’t call it a correct solution, though. The workaround is:

1. Add the following to the top of jquery.zqzoom.core.js (function found from some forgotten source):

   function isInDocument(el) {
   var html = document.body.parentNode;
   while (el) {
   if (el === html) {
   return true;
   }
   el = el.parentNode;
   }
   return false;
   }

2. at line 665, just before:

   document.body.removeChild(this.node);

add this:

if(isInDocument(this.node))

This will stop the exception from happening and allow the script to continue.