/    Sign up×
Community /Pin to ProfileBookmark

js mojozoom hack for xcart… help?

Hello all,

Have some old mojozoom js code here with dynamic xcart items… everything is working fine I just need to stop the onclick event that opens a pop up of the product… thank you to any help Ive been at it for awhile

[CODE]
var MojoZoom = (function() {

var $ = function(id) {return document.getElementById(id);};
var dc = function(tag) {return document.createElement(tag);};

var defaultWidth = 288;
var defaultHeight = 288;

function addEvent(element, ev, handler)
{
var doHandler = function(e) {
return handler(e||window.event);
}
if (element.addEventListener) {
element.addEventListener(ev, doHandler, false);
} else if (element.attachEvent) {
element.attachEvent(“on” + ev, doHandler);
}
}

function getElementPos(element)
{
var x = element.offsetLeft;
var y = element.offsetTop;
var parent = element.offsetParent;
while (parent) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
return {
x : x,
y : y
}
}

function getEventMousePos(element, e) {
var scrollX = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollY = document.body.scrollTop || document.documentElement.scrollTop;

if (e.currentTarget) {
var pos = getElementPos(element);
return {
x : e.clientX – pos.x + scrollX,
y : e.clientY – pos.y + scrollY
}
}
return {
x : e.offsetX,
y : e.offsetY
}
}

function makeZoomable(img, zoomSrc, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow) {
// make sure the image is loaded, if not then add an onload event and return
if (!img.complete && !img.__mojoZoomQueued) {
addEvent(img, “load”, function() {
img.__mojoZoomQueued = true;
setTimeout(function() {
makeZoomable(img, zoomSrc, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow);
}, 1);
});
return;
}

// sorry
var isIE = !!document.all && !!window.attachEvent && !window.opera;

var w = img.offsetWidth;
var h = img.offsetHeight;

var oldParent = img.parentNode;
if (oldParent.nodeName != “A”) {
var linkParent = dc(“a”);
linkParent.setAttribute(“href”, zoomSrc);
oldParent.replaceChild(linkParent, img);
linkParent.appendChild(img);
} else {
var linkParent = oldParent;
}

linkParent.style.position = “relative”;
linkParent.style.display = “block”;
linkParent.style.width = w+”px”;
linkParent.style.height = h+”px”;

var imgLeft = img.offsetLeft;
var imgTop = img.offsetTop;

var zoom = dc(“div”);
zoom.className = “mojozoom_marker”;

var zoomImg = dc(“img”);
zoomImg.className = “mojozoom_img”;

zoomImg.style.position = “absolute”;
zoomImg.style.left = “-9999px”;
document.body.appendChild(zoomImg);

var parent = img.parentNode;

var ctr = dc(“div”);
with (ctr.style) {
position = “absolute”;
left = imgLeft+”px”;
top = imgTop+”px”;
width = w+”px”;
height = h+”px”;
overflow = “hidden”;
display = “none”;
}

ctr.appendChild(zoom);
parent.appendChild(ctr);

var zoomInput = parent;

var useDefaultCtr = false;
if (!zoomImgCtr) {
zoomImgCtr = dc(“div”);
zoomImgCtr.className = “mojozoom_imgctr”;

var imgPos = getElementPos(img);
zoomImgCtr.style.left = w + imgPos.x + “px”;
zoomImgCtr.style.top = imgPos.y + “px”;

zoomImgCtr.style.width = (zoomWidth ? zoomWidth : defaultWidth) +”px”;
zoomImgCtr.style.height = (zoomHeight ? zoomHeight : defaultHeight) +”px”;

document.body.appendChild(zoomImgCtr);

useDefaultCtr = true;
}

zoomImgCtr.style.overflow = “hidden”;

if (!alwaysShow) {
zoomImgCtr.style.visibility = “hidden”;
}

addEvent(zoomImg, “load”, function() {
var zoomWidth = zoomImg.offsetWidth;
var zoomHeight = zoomImg.offsetHeight;

var ctrWidth = zoomImgCtr.offsetWidth;
var ctrHeight = zoomImgCtr.offsetHeight;

var ratioW = zoomWidth / w;
var ratioH = zoomHeight / h;

var markerWidth = Math.round(ctrWidth / ratioW);
var markerHeight = Math.round(ctrHeight / ratioH);

document.body.removeChild(zoomImg);
zoomImgCtr.appendChild(zoomImg);

var zoomFill = dc(“div”);
zoomFill.className = “mojozoom_fill”;
zoom.appendChild(zoomFill);

var zoomBorder = dc(“div”);
zoomBorder.className = “mojozoom_border”;
zoom.appendChild(zoomBorder);

zoom.style.width = markerWidth+”px”;
zoom.style.height = markerHeight+”px”;

if (alwaysShow) {
zoom.style.left = “0px”;
zoom.style.top = “0px”;

zoomImg.style.left = “0px”;
zoomImg.style.top = “0px”;
}

var isInImage = false;

if (!alwaysShow) {
addEvent(zoomInput, “mouseout”,
function(e) {
var target = e.target || e.srcElement;
if (!target) return;
if (target.nodeName != “DIV”) return;
var relTarget = e.relatedTarget || e.toElement;
if (!relTarget) return;
while (relTarget != target && relTarget.nodeName != “BODY” && relTarget.parentNode) {
relTarget = relTarget.parentNode;
}
if (relTarget != target) {
isInImage = false;
ctr.style.display = “none”;
zoomImgCtr.style.visibility = “hidden”;
}
}
);
// a bit of a hack, mouseout is sometimes not caught if moving mouse really fast
addEvent(document.body, “mouseover”,
function(e) {
if (isInImage && !(e.toElement == zoomBorder || e.target == zoomBorder)) {
ctr.style.display = “none”;
zoomImgCtr.style.visibility = “hidden”;
isInImage = false;
}
}
);
}

addEvent(zoomInput, “mousemove”,
function(e) {
isInImage = true;

var imgPos = getElementPos(img);

if (useDefaultCtr) {
zoomImgCtr.style.left = w + imgPos.x + “px”;
zoomImgCtr.style.top = imgPos.y + “px”;
}
ctr.style.display = “block”;
zoomImgCtr.style.visibility = “visible”;

var pos = getEventMousePos(zoomInput, e);
if (e.srcElement && isIE) {
if (e.srcElement == zoom) return;
if (e.srcElement != zoomInput) {
var zoomImgPos = getElementPos(e.srcElement);
pos.x -= (imgPos.x – zoomImgPos.x);
pos.y -= (imgPos.y – zoomImgPos.y);
}
}
var x = markerWidth/2;
var y = markerHeight/2;

if (!isIE) {
pos.x -= imgLeft;
pos.y -= imgTop;
}

if (pos.x < x) pos.x = x;
if (pos.x > w-x) pos.x = w-x;
if (pos.y < y) pos.y = y;
if (pos.y > h-y) pos.y = h-y;

var left = ((pos.x – x)|0);
var top = ((pos.y – y)|0);

zoom.style.left = left + “px”;
zoom.style.top = top + “px”;

zoomImg.style.left = -((pos.x*ratioW – ctrWidth/2)|0)+”px”;
zoomImg.style.top = -((pos.y*ratioH – ctrHeight/2)|0)+”px”;
}
);
});

// I’ve no idea. Simply setting the src will make IE screw it self into a 100% CPU fest. In a timeout, it’s ok.
setTimeout(function() {
zoomImg.src = zoomSrc;
}, 1);
}

function init() {
var images = document.getElementsByTagName(“img”);
for (var i=0;i<images.length;i++) {
var img = images[i];
var zoomSrc = img.getAttribute(“data-zoomsrc”);
if (zoomSrc) {
makeZoomable(img, zoomSrc, document.getElementById(img.getAttribute(“id”) + “_zoom”), null, null, img.getAttribute(“data-zoomalwaysshow”)==”true”);
}
}
}

return {
addEvent : addEvent,
init : init,
makeZoomable : makeZoomable
};

})();

MojoZoom.addEvent(window, “load”, MojoZoom.init);[/CODE]

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @ctaylor7 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...