Image Handler 2 (for ZC v1.3.8 ONLY) Support

tophand:

There is a IE bug in the jscrpt_imagehover.js.
The hover works, it just coming up outside the screen.
A few posts back I posted a link for the fix.
You can edit the jscrpt_imagehover.js file yourself or there is a patched file you can use.
You can search this thread for "IE Bug" also.

M

Thanks! I found it...and it works great now :)

hifipj:

Hello pro Zenners,

I have tried to search far and wide for the answer to this but please bear with me if it's already been discussed...

I have ZC 1.37 and IH2 up and working great. The problem is when I add new products via duplication.

Most of my products are similar, only the photos and description change a little from each one to the other, so to add a new product I choose duplicate, duplicate to same category, and keep attributes.

That gives me a new product where I can edit the description, etc. But at first I tried to go in and 'delete' the images for that product (new one) with IH then add new images. What I realized is that deleted the images from the PREVIOUS product that it was copied from.

So, I think, the right way to go about it if I want to copy this way is not to delete the images on the new product but instead go in and choose the first one, hit 'edit', upload that pic, choose the 2nd, 'edit' , upload, etc.

Is this right? Am I missing a trick that everyone else uses?!?!?

Thanks!
Patrick

I've done quite a bit of copying to create my similar product pages. I just copy the product, then edit it and upload the new file via the product editing page. I've never had a problem with it working and I don't have duplicate images on the product pages.

[QUOTE=crabdance;446866][QUOTE=bifficus;446831]> bifficus:

I just went to your site and it looks like you have things working. It worked as it should for me when I used the mouse to hover over the images. Do you have it working? I did not see any errors. Oh and yes, your flash image looks cool!

Hello All,

I thought it might be helpful to wrap up all of the work I have been doing on this issue into a single post. When I get it resolved, I will edit it to add the solution.

The problem: IH works fine so long as the image hover will fit on the browser window when you mouse over the original image. Thus, when I first load the home page for the store, i can mouse over the top products in the list and see the hovers just fine. No errors initially reported in the bottom left of the browser window.

When I try to hover over a window nearer the bottom, such that the popup hover position relative to the original image would not by default fit into the visible space of the brower window, I immediately get an error message in the bottom of the browser (IE 6.x)

If I scroll down the browser page, then rehover over the image, the hover will display correctly. However, once the "error" message shows in the browser footer, it will not go away. Refreshing the page will start the whole thing over again.

I know that this problem is resolvable as I have seen member sites that are working correctly. I have messed around with the hover java script to try and adjust sizing and positioning, but no luck.

At this point, I think I will do what some other people have done to resolve IH issues - strip out IH and try a file by file insert to ensure that it goes correctly. Unfortunately, that won't help much to source the problem, but at least if it "fixes" it, it might provide some help for others.

Stay tuned...

[QUOTE=bifficus;448263][QUOTE=crabdance;446866]> bifficus:

Hello All,

I thought it might be helpful to wrap up all of the work I have been doing on this issue into a single post. When I get it resolved, I will edit it to add the solution.

The problem: IH works fine so long as the image hover will fit on the browser window when you mouse over the original image. Thus, when I first load the home page for the store, i can mouse over the top products in the list and see the hovers just fine. No errors initially reported in the bottom left of the browser window.

When I try to hover over a window nearer the bottom, such that the popup hover position relative to the original image would not by default fit into the visible space of the brower window, I immediately get an error message in the bottom of the browser (IE 6.x)

If I scroll down the browser page, then rehover over the image, the hover will display correctly. However, once the "error" message shows in the browser footer, it will not go away. Refreshing the page will start the whole thing over again.

I know that this problem is resolvable as I have seen member sites that are working correctly. I have messed around with the hover java script to try and adjust sizing and positioning, but no luck.

At this point, I think I will do what some other people have done to resolve IH issues - strip out IH and try a file by file insert to ensure that it goes correctly. Unfortunately, that won't help much to source the problem, but at least if it "fixes" it, it might provide some help for others.

Stay tuned...

Nope... No luck. I also attempted to switch to the classic template from the Sophy Blue Grey that I am using, but that made no difference.

Any tips would be greatly appreciated at this point, as I am pretty much beyond my ability to resolve this issue.

THanks,

take a look here
http://forums.breakmyzencart.com/t68-couple-hints.html

Merlinpa1969:

take a look here
http://forums.breakmyzencart.com/t68-couple-hints.html

Hi, I installed all those patches, but no luck. No change in behavior. Here is the Jscript_imagehover.php contents:

/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact

Modified by Tim Kroeger ([email protected]) for use with
image handler 2 and better cross browser functionality
*/

var offsetfrommouse=[10,10]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400; // maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;

if (document.getElementById || document.all){
document.write('<div id="trailimageid">');
document.write('</div>');
}

function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
} else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
} else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
}

function gettrail(){
return new getObj("trailimageid");
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
zoomimg_w=zoomimgwidth;
zoomimg_h=zoomimgheight;
//if (oriwidth > 0){ offsetfrommouse[0] = oriwidth; }
//if (oriheight > 0){ offsetfrommouse[1] = -1 (zoomimgheight-oriheight)/2 - 40; }
// alert (offsetfrommouse[0] + "," + offsetfrommouse[1]);
if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
trailobj = gettrail().obj;
trailobj.style.width=(zoomimgwidth+(2padding))+"px";
trailobj.style.height=(zoomimgheight+(2*padding))+"px";
trailobj.setAttribute("startx", startx);
trailobj.setAttribute("starty", starty);
trailobj.setAttribute("startw", startw);
trailobj.setAttribute("starth", starth);
trailobj.setAttribute("imagename", imagename);
trailobj.setAttribute("imgtitle", title);
document.onmousemove=followmouse;
}

function hidetrail(){
trailstyle = gettrail().style;
trailstyle.visibility = "hidden";
document.onmousemove = "";
trailstyle.left = "-2000px";
trailstyle.top = "-2000px";
}

function followmouse(e){

var xcoord=offsetfrommouse[0];
var ycoord=offsetfrommouse[1];

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);

//if (document.all){
// trail.obj.innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
//} else {
// trail.obj.innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
//}
var relativeX = null;
var relativeY = null;

if (typeof e != "undefined"){
if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
relativeX = e.layerX;
relativeY = e.layerY;
} else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
relativeX = e.x;
relativeY = e.y;
}

if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
  xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
  xcoord += e.pageX;
}
if (docheight - e.pageY < zoomimg_h + (2 * padding)){
  ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
} else {
  ycoord += e.pageY;
}

} else if (typeof window.event != "undefined"){
if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
relativeX = event.x;
relativeY = event.y;
} else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
relativeX = event.offsetX;
relativeY = event.offsetY;
}

if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
  xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
  xcoord += truebody().scrollLeft+event.clientX;
}
if (docheight - event.clientY < zoomimg_h + (2 * padding)){
  ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) + event.clientY - docheight - truebody().scrollTop));
} else {
  ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) + event.clientY - docheight - truebody().scrollTop));

}

}

trail = gettrail();
startx = trail.obj.getAttribute("startx");
starty = trail.obj.getAttribute("starty");
startw = trail.obj.getAttribute("startw");
starth = trail.obj.getAttribute("starth");
imagename = trail.obj.getAttribute("imagename");
title = trail.obj.getAttribute("imgtitle");

// calculate and set position BEFORE switching to visible
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
if(ycoord < 0) { ycoord = ycoord*-1; }
if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
trail.style.left=xcoord+"px";
trail.style.top=ycoord+"px";
// alert (trail.style.left+","+trail.style.top);

if (trail.style.visibility != "visible") {
if (((relativeX == null) || (relativeY == null)) ||
((relativeX >= startx) && (relativeX <= (startx + startw))
&& (relativeY >= starty) && (relativeY <= (starty + starth)))){
newHTML = '<div><h1>' + title + '</h1>';
newHTML = newHTML + '<img src="' + imagename + '"></div>';
trail.obj.innerHTML = newHTML;
trail.style.visibility="visible";
}
}
}

The only other guess I could make is that because I changed the header size I needed to adjust the padding elsewhere... I think in the CSS... that was a while ago. Not sure if it would be relevant.

Thanks a bunch,

All fixed you changed the wrong lines

Here is what its supposed to look like

/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact

Modified by Tim Kroeger ([email protected]) for use with
image handler 2 and better cross browser functionality
*/

var offsetfrommouse=[10,10]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400;	// maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;


if (document.getElementById || document.all){
  document.write('<div id="trailimageid">');
  document.write('</div>');
}

function getObj(name) {
  if (document.getElementById) {
  	  this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
  } else if (document.all) {
    this.obj = document.all[name];
    this.style = document.all[name].style;
  } else if (document.layers) {
    this.obj = document.layers[name];
    this.style = document.layers[name];
  }
}

function gettrail(){
  return new getObj("trailimageid");
}

function truebody(){
  return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
	zoomimg_w=zoomimgwidth;
	zoomimg_h=zoomimgheight;
  //if (oriwidth > 0){ offsetfrommouse[0] = oriwidth; }
  //if (oriheight > 0){ offsetfrommouse[1] = -1 *(zoomimgheight-oriheight)/2 - 40; }
  // alert (offsetfrommouse[0] + "," + offsetfrommouse[1]);
  if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
  trailobj = gettrail().obj;
  trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
  trailobj.style.height=(zoomimgheight+(2*padding))+"px";
  trailobj.setAttribute("startx", startx);
  trailobj.setAttribute("starty", starty);
  trailobj.setAttribute("startw", startw);
  trailobj.setAttribute("starth", starth);
  trailobj.setAttribute("imagename", imagename);
  trailobj.setAttribute("imgtitle", title);
  document.onmousemove=followmouse;
}

function hidetrail(){
  trailstyle = gettrail().style;
  trailstyle.visibility = "hidden";
  document.onmousemove = "";
  trailstyle.left = "-2000px";
  trailstyle.top = "-2000px";
}

function followmouse(e){

  var xcoord=offsetfrommouse[0];
  var ycoord=offsetfrommouse[1];

  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);

  //if (document.all){
  //	trail.obj.innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
  //} else {
  //	trail.obj.innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
  //}
  var relativeX = null;
  var relativeY = null;
	
  if (typeof e != "undefined"){
    if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
      relativeX = e.layerX;
      relativeY = e.layerY;
    } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
      relativeX = e.x;
      relativeY = e.y;
    }

    if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
      xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += e.pageX;
    }
    if (docheight - e.pageY < zoomimg_h + (2 * padding)){
      ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
    } else {
      ycoord += e.pageY;
    }
  } else if (typeof window.event != "undefined"){
    if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
      relativeX = event.x;
      relativeY = event.y;
    } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
      relativeX = event.offsetX;
      relativeY = event.offsetY;
    }

    if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
      xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += truebody().scrollLeft+event.clientX;
    }
    if (docheight - event.clientY < zoomimg_h + (2 * padding)){
      ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) + event.clientY - docheight - truebody().scrollTop));
    } else {
      ycoord += truebody().scrollTop + event.clientY;
    }
  }

  trail = gettrail();
  startx    = trail.obj.getAttribute("startx");
  starty    = trail.obj.getAttribute("starty");
  startw    = trail.obj.getAttribute("startw");
  starth    = trail.obj.getAttribute("starth");
  imagename = trail.obj.getAttribute("imagename");
  title     = trail.obj.getAttribute("imgtitle");

  // calculate and set position BEFORE switching to visible
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
  if(ycoord < 0) { ycoord = ycoord*-1; }
  if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
  if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
  trail.style.left=xcoord+"px";
  trail.style.top=ycoord+"px";
//	alert (trail.style.left+","+trail.style.top);

  if (trail.style.visibility != "visible") {
    if (((relativeX == null) || (relativeY == null)) ||
      ((relativeX >= startx) && (relativeX <= (startx + startw))
      && (relativeY >= starty) && (relativeY <= (starty + starth)))){
      newHTML = '<div><h1>' + title + '</h1>';
      newHTML = newHTML + '<img src="' + imagename + '"></div>';
      trail.obj.innerHTML = newHTML;
      trail.style.visibility="visible";
    }
  }
}

Merlinpa1969:

All fixed you changed the wrong lines

Here is what its supposed to look like

/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact

Modified by Tim Kroeger ([email protected]) for use with
image handler 2 and better cross browser functionality
*/

var offsetfrommouse=[10,10]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400; // maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;

if (document.getElementById || document.all){
document.write('<div id="trailimageid">');
document.write('</div>');
}

function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
} else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
} else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
}

function gettrail(){
return new getObj("trailimageid");
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
zoomimg_w=zoomimgwidth;
zoomimg_h=zoomimgheight;
//if (oriwidth > 0){ offsetfrommouse[0] = oriwidth; }
//if (oriheight > 0){ offsetfrommouse[1] = -1 (zoomimgheight-oriheight)/2 - 40; }
// alert (offsetfrommouse[0] + "," + offsetfrommouse[1]);
if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
trailobj = gettrail().obj;
trailobj.style.width=(zoomimgwidth+(2padding))+"px";
trailobj.style.height=(zoomimgheight+(2*padding))+"px";
trailobj.setAttribute("startx", startx);
trailobj.setAttribute("starty", starty);
trailobj.setAttribute("startw", startw);
trailobj.setAttribute("starth", starth);
trailobj.setAttribute("imagename", imagename);
trailobj.setAttribute("imgtitle", title);
document.onmousemove=followmouse;
}

function hidetrail(){
trailstyle = gettrail().style;
trailstyle.visibility = "hidden";
document.onmousemove = "";
trailstyle.left = "-2000px";
trailstyle.top = "-2000px";
}

function followmouse(e){

var xcoord=offsetfrommouse[0];
var ycoord=offsetfrommouse[1];

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);

//if (document.all){
// trail.obj.innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
//} else {
// trail.obj.innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
//}
var relativeX = null;
var relativeY = null;

if (typeof e != "undefined"){
if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
relativeX = e.layerX;
relativeY = e.layerY;
} else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
relativeX = e.x;
relativeY = e.y;
}

if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
  xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
  xcoord += e.pageX;
}
if (docheight - e.pageY < zoomimg_h + (2 * padding)){
  ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
} else {
  ycoord += e.pageY;
}

} else if (typeof window.event != "undefined"){
if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
relativeX = event.x;
relativeY = event.y;
} else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
relativeX = event.offsetX;
relativeY = event.offsetY;
}

if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
  xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
  xcoord += truebody().scrollLeft+event.clientX;
}
if (docheight - event.clientY < zoomimg_h + (2 * padding)){
  ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) + event.clientY - docheight - truebody().scrollTop));
} else {
  ycoord += truebody().scrollTop + event.clientY;
}

}

trail = gettrail();
startx = trail.obj.getAttribute("startx");
starty = trail.obj.getAttribute("starty");
startw = trail.obj.getAttribute("startw");
starth = trail.obj.getAttribute("starth");
imagename = trail.obj.getAttribute("imagename");
title = trail.obj.getAttribute("imgtitle");

// calculate and set position BEFORE switching to visible
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
if(ycoord < 0) { ycoord = ycoord*-1; }
if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
trail.style.left=xcoord+"px";
trail.style.top=ycoord+"px";
// alert (trail.style.left+","+trail.style.top);

if (trail.style.visibility != "visible") {
if (((relativeX == null) || (relativeY == null)) ||
((relativeX >= startx) && (relativeX <= (startx + startw))
&& (relativeY >= starty) && (relativeY <= (starty + starth)))){
newHTML = '<div><h1>' + title + '</h1>';
newHTML = newHTML + '<img src="' + imagename + '"></div>';
trail.obj.innerHTML = newHTML;
trail.style.visibility="visible";
}
}
}

Thanks so much Merlin, and guess what?  I found this other change and applied it before reading your suggestion:

 Re: Image Handler 2 Support 

--------------------------------------------------------------------------------

Hi
I may have found a fix for the bad behaviour of ie6 by pushing the zoom image too high nearly off the page, when clicking on images at the bottom end of a lot of picture product listings. 

Its a simple mod to the ih2 jscript file...
<http://forums.breakmyzencart.com/t10...om-images.html>
I remember the odd post here a while back, similarly complaining the zoom window goes too high sometimes
__________________
1.3.7 at last... on my hareslade site <http://www.hareslade.com/zc/index.php> 

Here is another link to it: [http://forums.breakmyzencart.com/t109-zencart-possible-partly-page-zoom-images.html](http://forums.breakmyzencart.com/t109-zencart-possible-partly-page-zoom-images.html)

And to make triple sure that this fix, plus the one Merlin just put up is captured in one spot, here is the actual fix I applied:  

Code:
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
    if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
      //ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
        ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
    } else {
        ycoord += ie_offset + truebody().scrollTop + event.clientY;


So, I am going to try the one that Merlin posted for me as well, but this the problem is officially fixed for me.  

Thanks for all the help everyone, and especially to Merlin and Hareslade.

Oh, and off topic:  I am soooo glad I switched my server from Powweb to [Camelot](http://www.camelot-hosting.com/hosting/zencart.php) The speed blows away the glacial site that I had before, and the service is excellent.  

Todd

Hello gurus, masters, developers...

I am using Red Passion template, IH2, Lightbox.
I have a problem with product listing.
Let me show you the screenshots rather than trying to explain with my rough english... show mercy please

1. Nice gap between products when Image Handler resizing is disabled:
   

2. Image Handled resizing enabled. No gap and gets ugly when certain images are fused/joined together:
   

You may disregard first test item's cell because it is extended by the large "Free Shipping" image.

How can this be avoided? Even if the cell size has to be hard coded as I do not intend to swith template.
Please note CSS and PHP are not among the languages I understand, however I am OK with basic HTML and can do some light modifications if any suggested.
Is it actually IH2 or it is template issue?

Thank you.

Hi,
Me again...
One more thing.
How can sharpening of resized (small size for products listing) images be controlled (increased)?
I need to get them a little more crispy.
My host supports GD2.
Thank you

If anyone has an idea... my client SWEARS... she needs the title removed from above the Image Zoom Rollover... she wants it to only be the picture...

I am assuming it is in the jscript_imagehover.js

but i'm terrible with javascript. every time i try to remove something to see if its the title. i break the rollover....

can anyone share some advice? I'd really appreciate it.

Thanks.

Hi,

I solved my first problem with the gap. It was very simple though in the wrong place asked. not much related to IH, rather to the template.
Necessity is the mother of invention and the best teacher :bigups:
Just to share if someone needs an answer for the same question:

in the file /includes/templates/template_default/common/tpl_tabular_display.php changed cellpadding="0" to "8" in the very first <table> tag :)

Just one char and so much efforts. Imagine the knowledge and the time spent by the developer team and all the contributors :smartalec: :bigups:
They do deserve the appreciation.

Still ... any ideas how to control the sharpening? I don't think I could deal with this - so many things to consider and so deep to dig...
If accidentially find out how I will update you.

jhs:

Hi,

I solved my first problem with the gap. It was very simple though in the wrong place asked. not much related to IH, rather to the template.
Necessity is the mother of invention and the best teacher :bigups:
Just to share if someone needs an answer for the same question:

in the file /includes/templates/template_default/common/tpl_tabular_display.php changed cellpadding="0" to "8" in the very first <table> tag :)

Just one char and so much efforts. Imagine the knowledge and the time spent by the developer team and all the contributors :smartalec: :bigups:
They do deserve the appreciation.

Still ... any ideas how to control the sharpening? I don't think I could deal with this - so many things to consider and so deep to dig...
If accidentially find out how I will update you.

You can adjust the padding via the style sheet without touching the tpl_tabular_display.php file.
In your style sheet, find .productListing-odd td, .productListing-even td

Here is what mine looks like.

.productListing-odd td, .productListing-even td (line 684)
{
vertical-align: top;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
margin-bottom: 1em;
border-bottom-width: 2px;
border-bottom-style: double;
border-bottom-color: #04d518;
border-top-width: 2px;
border-top-style: double;
border-top-color: #04d518;}
```For compression quality --> Admin -->  Configuration --> Images  and look for  IH Image Compression Quality. There is a setting for each size, small, medium and large.

M

Thank you tophand,

The CSS way is much more convenient and gives more flexibility.
Thanks for the idea, I even didn' know it could be there...

As of the Compression Quality - yes, already set up to 100 but the resized images are kind of soft, lacking sharpness which is important eye caching visual effect though I know oversharpening screws up the look.
So I am still in hunt for the sharpenning option in IH2 code calls to GD library.

Thanks

jhs:

Hi,

I solved my first problem with the gap. It was very simple though in the wrong place asked. not much related to IH, rather to the template.
Necessity is the mother of invention and the best teacher :bigups:
Just to share if someone needs an answer for the same question:

in the file /includes/templates/template_default/common/tpl_tabular_display.php changed cellpadding="0" to "8" in the very first <table> tag :)

Just one char and so much efforts. Imagine the knowledge and the time spent by the developer team and all the contributors :smartalec: :bigups:
They do deserve the appreciation.

Still ... any ideas how to control the sharpening? I don't think I could deal with this - so many things to consider and so deep to dig...
If accidentially find out how I will update you.

Thank you JHS, I had this problem as well, and hadn't even begun to go looking for it. Thanks to your work I don't need to!

I Love Zen Forums!

ben_golant:

For anyone who encounters the issues I reported - page jumping up and down and the wrong larger image being displayed when you add multiple images to a product - this is caused when you use - as you always should - your own custom template.

You need to copy from the Image Handler 2 /includes/templates/template_default/css folder : the css, jscript and popup_image_additional folders to your custom template.

This is just the answer I need.. Thanks a lot

tophand:

I know, this thread has 174 pages but if you spent time you would have found most if not all the answers to your questions.
But I feeling in a helpful mood so... :D
Newest IH --> **Version:** 2.0 v0916 in the Zen Cart downloads <---click

If you check it out, you see it does not even have html_output.php.
It's stated right on the page.
Also works very well with ZC1.3.7
One of the reasons to use IH is..

• Improved site performance (faster loading, faster display).
  Ok, some people have trouble because they are uploading very large image files (2+MB) and if it is not IH that chokes but could be either GD libraries or ImageMagick that chokes. Work around is to upload the largest file you want displayed (large file to display is 450x450, so that is the size uploaded).
  Also loading up a page with a lot of images will slow down response time no matter if you use IH or not.

And you last question --> no.
Hoover only works on small images.

M
Hello Tophand,
Thank you for your helpul mood. The go live of IH has been a success.
So I suggest to avoid to have to reply to stupid guy like me not courageous enough to read 198765 posts to modify the text of the mod : thi is the very last version of of IH. Instaled succesfuly by cdelab on ZC V1.3.7 with support of Tophand ;-)
Thank you.

Hi,

I've just installed Image Handler2, works great appart from on 2 pages :

• All products page
• Product info page

I've tried the following for the product info page, but it doesn't work.

Could someone help me please.

cheers

baz:(

Sorry, if may be a dumb question, but I am not sure what to do with the ´shopad´folder, do I have to install it too or is it optional?
What is it for anyway?

Thanks a lot.

regards,
kruna

Quote:
Originally Posted by RedrikShuhart
I have found a solution that makes both features, image hover and scrolling sidebox, work perfectly fine in IE6.

1. First of all, you keep the 'style="position:relative"' in includes/classes/bmz_image_handler.class.php intact.

2. Add style="position:relative" to the marquee tag in includes/templates/YOUR_TEMPLATE/sideboxes/tpl_whats_new.php .
   So you will have something like $content .= '<MARQUEE style="position:relative" behavior= " ....

3. Add the following block to your stylesheet :

#whatsnewContent{
height: 150px;
overflow: hidden;
position: relative;
}

The block name, whatsnewContent, has to match the id name of the div that's holding the content of the sidebox.

Thats it. Have fun :)

Image Handler 2 Conflict with Scrolling side box

I found this post I quoted and tried to make it work for me but could not get it to work. Right now I removed the scrolling side box.

Image Handler 2 Conflict with Scrolling side box

I've tried all of this, taking out the style, and adding the $content .=' <Marquee style= position:relative" behavior= " I'm not a php programer so I do know what goes next and all I get is a parse error. when I just take out the style it still don't work.
when I take out this: return $parameters . 'style="position:relative"

I get a parse error. I take out this: return $parameters . 'style="position:relative"onmouseover="showtrail
I still get a parse error.

If I take this all out the box still don't work.
return $parameters . 'style="position:relative"onmouseover="showtrail (' . "'$products_image_zoom','$alt',$width,$height,$zoo mwidth,$zoomheight,this," . $this->zoom['startx'].','.$this->zoom['starty'].','.$this->zoom['width'].','.$this->zoom['height'].');" onmouseout="hidetrail();" ';

Could someone please help.

weezees gifts DOT com