Image Handler 2 - no zoom on new images

I have inherited a ZC 1.3.9a site with Image Handler 2 installed.

IH appears to be working fine for all the legacy products -- if I mouse over I get a zoom, if I click on one of the additional thumbnails, the larger version appears in the main image window.

BUT, when I try to add new products, I don't seem to be getting any of the IH functions. I used IH to upload several additional images (I just uploaded the smallest size).

Everything seems to work OK -- no error messages and I can see the thumbnails when I view the product. But there's no zoom and when I click on the thumbnail, the larger version opens in a new window -- not in the image section of the product page.

What am I doing wrong?

Thanks,

John

Are your new images JPG or GIF format?

IH does not work with GIF format.

IH needs only ONE image loaded into the main images folder, and that should be an image of "reasonable" dimensions - we use images of 600px deep X 800px wide for "landscape" and 750px deep and 550px wide for "portrait". we try to keep the file-size under 150kb.

Rather than use IH to upload your images, simply FTP them to the images folder.

Hmmm, the images are .jpg and are fairly small. Does IH need to be enabled for certain categories of products? I noticed that the zoom function is working fine in some categories, but not in one specific category.

IH creates cached files of the initial image, and thereafter does not use the original image file (unless it is updated or replaced with a file of the same name.)

So... it is best to load a fairly large "original" image - as long as it's not too big in terms of file-size (kb).

If IH is working in "most" categories, but not in others, it may be that the site's original owner "deliberately" disabled it for certain categories.

schoolboy:

IH does not work with GIF format.
.

Image handler works with jpg, gif and pngs.

we need to know what version of Image handler 2, there are about 8 varients of it

If the problem is with new images that are being added not showing the hover effect, but old existing ones are working

then we need to

a) have a link to the site to see a page where it is working, and a link to a page where it isn't working
b) Depending on your version of image handler, it could be the way your images are named, Image hover in early version didn't work if the product neame contained apostrophes or special characters

Thank you so much for your help.

On the About page for IH, it says version 2.0

Here's a page where it IS working:

http://quinceandco.com/store/index.php?main_page=product_info&cPath=2_12&products_id=98

And a page where it is NOT working:

http://quinceandco.com/store/index.php?main_page=product_info&cPath=16&products_id=97

And to schoolboy... any idea where IH would be disabled in certain categories? I don't see anything in the IH control panel that would allow for selective disabling of the effects, so I'm guessing it would be on one of the script files.

Interesting -- the "about" page of IH says version 2.0, but when I looked at the actual image_handler.php in the admin directory, it says 1.5. Maybe I just need to upgrade?

Image handler is either on or off, you can't disable it for specific categories

I can't get the mouse over hover to work on either page

There are about 7 or 8 versions of image Handler 2, you appear to have a fairly old version (which doesn't work properly with Opera, safari, chrome or IE9),

Your code just doesn't look right to me, there is lots missing that should make the hover work, like the mouseover event, its not there, so it won't work

this is the code I see on your site for additional images

<div class="additional-images"> <a href="images/gretchen_02.jpg" rev="bmz_cache/4/4bfcebb28003d8a5eccedbac496907a7.image.231x347.jpg" rel="zoom-id:Zoomer;"><img src="bmz_cache/4/4bfcebb28003d8a5eccedbac496907a7.image.80x120.jpg" alt="gretchen" title=" gretchen " width="80" height="120" border="0" /></a></div>

This is from a site where image handler is installed correctly

<div class="additionalImages centeredContent" style="width:100%;"> <script language="javascript" type="text/javascript"><!-- document.write('<a href="images/girls undies LG_01.jpg" rel="lightbox-g" title="Girls briefs"><img src="bmz_cache/7/7b39548044d2848127ab79ce303c5b33.image.120x102.jpg" alt="Girls briefs" title=" Girls briefs " width="120" height="102" style="position:relative" onmouseover="showtrail(\'bmz_cache/7/7b39548044d2848127ab79ce303c5b33.image.250x214.jpg\',\'Girls briefs\',120,102,250,214,this,0,0,120,102);" onmouseout="hidetrail();" /><br />larger image</a>'); //--></script> <noscript><a href="http://darncat.com/index.php?main_page=popup_image_additional&pID=9&pic=0&products_image_large_additional=images/large/girls undies LG_01_LRG.jpg" target="_blank"><img src="bmz_cache/7/7b39548044d2848127ab79ce303c5b33.image.120x102.jpg" alt="Girls briefs" title=" Girls briefs " width="120" height="102" style="position:relative" onmouseover="showtrail('bmz_cache/7/7b39548044d2848127ab79ce303c5b33.image.250x214.jpg','Girls briefs',120,102,250,214,this,0,0,120,102);" onmouseout="hidetrail();" /><br /><span class="imgLinkAdditional">larger image</span></a></noscript></div>

Is image hover turned on?

Post your image settings, you can cut and paste from admin --> Config --> images

Also Download Image handler 3, and read the readme about configuring, IH3s readme is much more exhaustive and explains things a lot better than the readme in IH2

Strange -- the image hover works (for me on Firefox, anyway) in all categories except the "More" (which is a newly added category).

As far as I can tell, hover is on, but I don't see that value explicitly listed (see below).

As you note, it might be time to try an upgrade to version 3 and see if that fixes the problem.

Here are the values from Configuration > images. If you see anything amiss, let me know. Otherwise, I think I'll try the upgrade.

Thanks, as always, for the help!

Small Image Width 100
Small Image Height 80 Info
Heading Image Width - Admin 57 Info
Heading Image Height - Admin 40 Info
Subcategory Image Width 100 Info
Subcategory Image Height 57 Info
Calculate Image Size true Info
Image Required true Info
Image - Shopping Cart Status 1 Info
Image - Shopping Cart Width 50 Info
Image - Shopping Cart Height 40 Info
Category Icon Image Width - Product Info Pages 57 Info
Category Icon Image Height - Product Info Pages 40 Info
Top Subcategory Image Width 150 Info
Top Subcategory Image Height 85 Info
Product Info - Image Width 150 Info
Product Info - Image Height 120 Info
Product Info - Image Medium Suffix _MED Info
Product Info - Image Large Suffix _LRG Info
Product Info - Number of Additional Images per Row 3 Info
Image - Product Listing Width 100 Info
Image - Product Listing Height 80 Info
Image - Product New Listing Width 100 Info
Image - Product New Listing Height 80 Info
Image - New Products Width 100 Info
Image - New Products Height 80 Info
Image - Featured Products Width 100 Info
Image - Featured Products Height 80 Info
Image - Product All Listing Width 100 Info
Image - Product All Listing Height 80 Info
Product Image - No Image Status 1 Info
Product Image - No Image picture no_picture.gif Info
Image - Use Proportional Images on Products and Categories 1 Info
IH resize images yes Info
IH small image filetype no_change Info
IH small image background 255:255:255 Info
IH watermark small images no Info
IH zoom small images yes Info
IH small image hotzone yes Info
IH small image compression quality 85 Info
IH medium image filetype no_change Info
IH medium image background 255:255:255 Info
IH watermark medium images no Info
IH zoom medium images yes Info
IH medium image hotzone yes Info
IH medium image compression quality 85 Info
IH large image filetype no_change Info
IH large image background 255:255:255 Info
IH watermark large images no Info
IH large image compression quality 85 Info
IH large image maximum width 750 Info
IH large image maximum height 550 Info
IH watermark gravity Center Info
IH zoom gravity SouthEast

jgold723:

Everything seems to work OK -- no error messages and I can see the thumbnails when I view the product.
But there's no zoom and when I click on the thumbnail,
the larger version opens in a new window -- not in the image section of the product page.

Aha, its not Imagehandler thats the problem, you are using another add-on,

Image handler doesn't work that way.

Image handler is on your page, but the fuctionality you are talking about is controlled by another add-on

I am afraid i can't figure out which one it is

Huh?

Image handler doesn't do the zoom?

The behavior I described is in the category that isn't working. The other categories on the site work as they should (zoom, etc.)

And even in the category that isn't working, I uploaded the images via image handler.

Image handler has a "hover-zoom" effect, only at product listing levels (when there is an array of products with smaller thumbnails on display).

If you are getting to the product INFORMATION page, and the main-image click-zoom is not functioning, then you have a problem probably not related to IH2.

Do you have a "lightbox" module installed - as this would probably overwrite (replace) the core zencart zoom feature?

jgold723:

Huh?

Image handler doesn't do the zoom?

The behavior I described is in the category that isn't working. The other categories on the site work as they should (zoom, etc.)

And even in the category that isn't working, I uploaded the images via image handler.

On a page like you mentioned above, if only Image handler is installed what will happen is the following

1. if you hover over an additional image, a larger image hover appears over top of that image, NOT over the main page image
2. if you click on the additional image, it will open in a popup window, It won't replace the main page image like yours is doing, you appear to have an image swapper of some sort

This is how image handler should work

http://grumpykiwi.com/haeana/index.php?main_page=product_info&cPath=1376_1624&products_id=15239

move your mouse over one of the additional images, and you will see a hover image appear

Click on the additional image, and it should open the large version in a pop-up window.

.
Yes you have image handler installed, and yes you are using it to upload additional images, it is very good at that, but there is another add-on that controls the image swapping that you see on your page. you need to find out what that is and ask in the thread for that, as sometimes there can be issues

This is why its not working

If you have a look at the source of those 2 pages you linked to you will see on the working one (in the head section)

<link href="includes/templates/quince/css/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/> <script src="includes/templates/quince/jscript/magiczoom.js" type="text/javascript"></script>

Those files are missing on the page that doesn't work.

You could try renaming those files to

jscript_magiczoom.js

and

css_magiczoom.css

and see if that fixes the problem (it should as it will match zen naming conventions)

Hi Nigel

We use Magiczoom on several sites, and there's no requirement to rename the files. They just need to be put into the correct places.

If you look at the SOURCE CODE of THIS PAGE, you will see how the module composes necessary references in the <head> section of the page.

Additionally, there are some detailed installation requirements for the Magiczoom mod. While the mod does have an "auto install" capability (which works very well), we prefer to install it manually. we find the manual install better - especially if we have other image mods running.

We find MagicZoom to work faultlessly alongside IH.

The above is relevant for MagicZoom (zencart version).

If you want to use MagicSlideshow, then the naming of the JS and CSS files is in accordance with your advice above, and as the slideshow is usually designated for a certain page (or pages), the JS has to be loaded into the relevant includes/modules/pages/XXXXX/ folder.

jgold723 ... If your MagicZoom is not functioning, it's probably because it has not been installed correctly. Go through the MANUAL INSTALL README, and check if your current setup meets the requirements.

Schoolboy and Nigel -- thank you very much for the feedback and enlightenment on Imagehandler. I'll dig further into this to figure out what's happening. I very much (can't say how much) appreciate the help!

John

FOUND IT!!!!!!!!!!!!!!!!!!

First, a huge thank you to Nigel and Schoolboy for hanging in there with me. I owe you two much -- if you're ever in my neck of the woods (Maine, USA) look me up -- I owe you a couple rounds of drinks.

The zoom/photo swap function was being done by Magiczoom (not IH). The problem was that the original designer had set the html_head.php file to call that particular script only for specific categories:

<?if (($cat_id == 7)||($cat_id == 2)||($cat_id == 1)||($cat_id == 16)){?>
<link href="includes/templates/quince/css/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="includes/templates/quince/jscript/magiczoom.js" type="text/javascript"></script>
<?}?>

I added the newest category and now it works fine.

Again, many, many thanks for your help. ZC has been a true learning experience with the help of people like you.

schoolboy:

If IH is working in "most" categories, but not in others, it may be that the site's original owner "deliberately" disabled it for certain categories.

So I was partially right - though at the point I made that comment we didn't know magiczoom was involved.

If you want the magiczoom GLOBAL (no restrictions on categories) then just remove the php code around the magiczoom code:

<link href="includes/templates/quince/css/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/> <script src="includes/templates/quince/jscript/magiczoom.js" type="text/javascript"></script>

Hi Schoolboy -- indeed, you were! Thanks again.