Image Handler for zencart - making the large image the hover image

Image handler creates 3 sizes of image

1. -Small thumbnail
   
2. -Product image - medium sized image that appears on the product info page and is the hover image that appears when you mouse over a thumbnail) 
3. -Larger image, which you see by clicking the larger image link on the product info page

A previous commenter (Mathias) asked if it was possible to have the hover image be larger than the product image, this cannot be done out of the box, but you can do it with a small tweak to the code.

as always backup your files before making changes

 In your
includes/classes/bmz_image_handler.class.php

 Find the following (around line 697)

$zoom_sizetype = ($this->sizetype=='small')?'medium':'large';
   

and replace it with

$zoom_sizetype = ($this->sizetype=='small')?'large':'medium';

 Save the file and upload, you may need to refresh the page you are viewing to see the change

Now when you mouse over a thumbnail the large image is shown as the hover

Let me know if it works for you

Image handler - Remove image name from hover box

When you have image handler installed, the image hover features an enlarged version of the image with the images name at the top of the image box.

So what if you want to remove the images name from the top of the box.

Well you could hack into the source code in image handler or you could use CSS, and thats exactly the way i do it, when someone wants the image name gone from the hover box

in your

includes/template/your-template/css/style_imagehover.css file

find the section of css that says

#trailimageid h1 {
font-size: 100%;
font-weight: normal;
margin: 0;
padding: 2px 0px;
text-align: left;
width: 100%;
}


and replace it with

#trailimageid h1 {
display:none
}


Just remember to repeat these steps when you reinstall imagehandler

Zencart Buttons - new and improved

Zen carts default buttons are functional, but a touch bland and dated, stylewise at least, so when i was browsing the forums i saw a post by Torvista saying that he had updated the Zen button construction kit to work with php 5.3, but was having issues with accents (Çüæ etc) in 5.3 i thought i would have a look at it, and it is kind of cool.

Anyway getting accents to work was a doddle, as i had encountered this before, basically the script was using html names like À instead off html numbers like À for the character À, so that turned into a nice easy thing to fix.

Then being the anally retentive person that i am i decided that getting transparency o around the png buttons would be a good idea, that took quite a while, I got it working fairly quickly, but it broke the gif and jpeg script, so i ended up going back to the drawing board, and rewriting my fix, so it works without stuffing up jpeg and gif generation.

I also added a switch on the front end so people could select to generate admin or shop buttons, as originally you needed to rename a file everytime you wanted to generate one or the other, this was made heaps easier as torvista had set it so that admin and shop buttons were saved to different directories.

and then i submitted it as an update to zencart and it got accepted

 And by the time you read this there will be another version available, Divavocals and Torvista, did some more work on it by making the structure more logical, and also making the interface tabbed for easier use.

But the big thing coming up in the new release, well OK the bit i did, is you can now create your own button with your own test on it, and if you want you can select an icon to go on it

 So keep an eye out for it coming to a zencart repository near you :)

Zencart Image Handler - Webkit and Opera fix

Ok I have now got the original ZenCart Image handler Jscript fixed and working in Webkit (Safari, Chrome) and Opera

here is an example page,


!!! Update 24 June 2010 - Found and fixed minor bug
!!! Update This Javascript is now included with the new releases of image handler Yay!

How to use the code

Open your

zencart -> Includes -> templates -> your template -> jscript
 jscript_imagehover.js file



Delete all the code in that file, then paste the code below into that file and upload


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

Image Handler Jscript
Version 4.1
This version brings in Opera support, and fixes the webkit (Safari and Chrome) Bugs
Modified by Nigel Thomson (nigel@nigel.geek.nz) 12 June 2010
http://nigeltsblog.blogspot.com/2010/06/zencart-image-handler-webkit-and-opera.html

MODIFIED by p.hailey@virgin.net ie 6 fix attempt see zencart forum IH2 thread
Modified by Tim Kroeger (tim@breakmyzencart.com) 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;
var vpos;
//Detect IE
var stIsIE = /*@cc_on!@*/false;
//detect opera
var isOpera =
    window.opera?1:0;
// Detect Webkit browsers
var isWebKit =
  navigator.userAgent.indexOf("AppleWebKit") > -1;

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(){
if (isWebKit){
  return document.body;
  }else if (isOpera) {
  return document.documentElement;
  }else{
  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 (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];
if (stIsIE){
  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);
}
else
{
  var docwidth=pageXOffset+window.innerWidth-15;
  var docheight=Math.min(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; // original code replaced to work with Opera
//      relativeY = e.y; // original code replaced to work with Opera
      relativeX = event.offsetX;
      relativeY = event.offsetX;
    }
    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));
      // returning different values for ff and (opera and webkit) - fixed 12th june 2010
    } else {
      ycoord += e.pageY;
    }

  } else if (typeof window.event != "undefined"){ // Seems to be IE
    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;
    }
/* 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;
    }
  }

  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
if (stIsIE){
  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);
}else{
  var docwidth=pageXOffset+window.innerWidth-15;
  var docheight=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";

  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";
    }
  }
}
 

Getting Zencarts Image Handler, working correctly in Safari, Chrome and Opera

 This Info is out of date, there is an upgraded script available that works better, and requires no changes to your code apart from replacing the contents of the image handler provided jscript_imagehover with new code


This is a bodge to fix the image hover issue in Image Handler that effects Webkit (Safari and Chrome) based browsers and the Opera browser.

The issue was that the popup hover image only appeared above the original page fold, so when you had a large list of products and hovered over one near the bottom, the popup doesn't appear on screen, (it is working, it's just appearing off the screen)

Ok first off i am not a developer, i am a bodger, I take a few bits of code and bodge them together to get the outcome i want.

This bodge is given as an "as is where is" bodge and i don't take any responsibility for any problems you may encounter, so use common sense and back-up your files before making any changes.

First off, you should have installed image handler, and it should be working correctly in IE and/or Firefox.

You will need to alter a few files, if these files are not in your template directory, then you may need to copy them from the default template.

zencart -> Includes -> templates -> your template -> common

html_header.php
tpl_main_page.php

Step One

Sorting out the javascript

This is the crux of the matter, the current javascript doesn't work with Safari, Chrome and Opera, but it works fine with Firefox and Internet explorer, the new fix file works with all browsers i have tested except IE6, so what we are going to do is have two javascript files, one for modern browsers and one for IE6, not the perfect solution, but it works.

For this bodge to work, you will need to rename this file

zencart -> Includes -> templates -> your template -> jscript

jscript_imagehover.js

to

ie6_imagehover.js

This file should be in the jscript directory of your template as well as the default template, change them both and make sure there is no file on the server called jscript_imagehover.js as this will conflict and can cause errors

copy this file and add it to your jscript directory.

Step 2

Now we need to call the javascript files depending on the browser, so you will need to open this file


zencart -> Includes -> templates -> your template -> common
html_header.php 

scroll right to the bottom of the page and then paste this directly before the closing head tag
remembering to replace YOUR_TEMPLATE with your template name

<!--[if lt IE 7]>
<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE/jscript/IE6_imagehover.js"></script>
<![endif]-->
<!--[if gte IE 7]><!-->
<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE/jscript/mb_imagehover2.js"></script>
<!--<![endif]-->
Basically all that does is select the original javascript for IE6, all other browsers get the new javascript

Step 3

Open up this file

zencart -> Includes -> templates -> your template -> common
tpl_main_page.php

add the following directly below the body tag

<div style="display: none; position: absolute; z-index: 110; left: 400; top: 1000; width: 15; height: 15" id="preview_div"></div>

Save and upload you files.

Step 4 - CSS
add this to the bottom of your stylesheet
a:hover {
text-decoration:none;
}

a {
text-decoration:none;
}

#interface1 {
z-index:1;
}

#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%}

#loader {
font-family:Tahoma, Helvetica, sans;
font-size:10px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:135px;
border:1px solid #6A6A6A;
text-align:left;
z-index:255;
}

#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:10px;
background-color:#9D9D94
}

#loader_bg {
background-color:#EBEBE4;
position:relative;
top:8px;left:8px;height:7px;
width:113px;font-size:1px
}

.border_preview{
z-index:100;
position:absolute;
background: #fff;
border: 1px solid #444;
}

.preview_temp_load {
vertical-align:middle;
text-align:center;
padding: 10px;
}
.preview_temp_load img{
vertical-align:middle;
text-align:center;
}


/*Image Title Styling*/

.title_h2 {
padding:12px 0 0 18px;
}

h2 {
font-size:14px;
padding:0;
margin:0;
font-family: "century gothic";
}


Once you have uploaded all the files, it should be working, the image hover has a loading bar unfortunately this has a bug in firefox for some document types, so if you see the bug remove the css that relates to the loading bar


you can see this working on this site