I know it’s an old one, but I need specific help with this and suspect I need a base terminate condition; however, I’m stump as to what/where because it’s a hover (mousemove) action.
Would really appreciate if someone could point it out for me.
Basically, I’m trying to adapt an old ‘abandoned’ jquery into a Wordpress plugin. It’s working for the most part, but as soon as I re-edit the page the error start. To be clear, this is not a Wordpress issue or question.
Browser hangs on the slow script and I’m pretty sure it’s missing a base terminate condition. Error message varies between "InternalError: too much recursion" and "Maximum call stack size exceeded"
Image and Image-zoom are two images and size is the magnifier size, all loaded to the dataset attribute of a div. The script would then reveal some of the second image in a 'magnifier' as the pointer in moved over the main image.
The jQuery part:
(function($){
$.fn.magnifierRentgen = function() {
return this.each(function() {
var th = $(this),
dataImage = th.data("image"),
dataImageZoom = th.data("image-zoom"),
dataSize = th.data("size");
th
.addClass("magnifierRentgen")
.resize(function() {
th.find(".data-image, .magnifier-loupe img").css({
"width" : th.width()
})
})
.append("<img class='data-image' src='" + dataImage + "'><div class='magnifier-loupe'><img src='" + dataImageZoom + "'> ")
.hover(function() {
th.find(".magnifier-loupe").stop().fadeIn()
}, function() {
th.find(".magnifier-loupe").stop().fadeOut()
})
.find(".data-image").css({
"width" : th.width()
}).parent().find(".magnifier-loupe").css({
"width" : dataSize,
"height" : dataSize
})
.find("img").css({
"position" : "absolute",
"width" : th.width()
});
th.mousemove(function(e) {
var elemPos = {},
offset = th.offset();
elemPos = {
left : e.pageX - offset.left - dataSize/2,
top : e.pageY - offset.top - dataSize/2
}
th
.find(".magnifier-loupe").css({
"top" : elemPos["top"],
"left" : elemPos["left"]
})
.find("img").css({
"top" : -elemPos["top"],
"left" : -elemPos["left"],
"width" : th.width()
})
});
$(window).resize(function() {
$(".magnifierRentgen").resize();
});
});
};
})(jQuery);
and the div it targeted by unique id(parent) as well as the class(.fl-loupe-reveal)
jQuery(function($) {
$('.fl-node-<?php echo $id; ?> .fl-loupe-reveal').magnifierRentgen();
});
and the div looks like this:
<div class="fl-loupe-reveal loupereveal-container"
data-image="<?php echo $settings->photo_one_src; ?>"
data-image-zoom="<?php echo $settings->photo_two_src; ?>"
data-size="<?php echo $settings->loupe_size; ?>" >
</div>