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