Jump to content

Zooming issues with


Recommended Posts

I am setting up my store, but for some reason the hover over image to zoon feature is definitely NOT working and I'm not sure how to fix it. I have been in the js.magnifier file and adjusted the width/height but it doesn't change anything. I'm not sure what else to honestly do. Any ideas?



Link to comment
Share on other sites

The information I get is that you are running CC5? Are you designing or modifying a skin?


From your attached image above, it appears you are getting the zoom window (with a thin black border), but the zoomed image is smaller than the product's image.


If I am right about that, let's review what is contained in the skin's config.xml file.


(And the last time I was there, I really enjoyed Aunt Alice's.)

Link to comment
Share on other sites

Yea, they recently had a fire and not only rebuilt it but another location :) 


I'm not sure what I'm looking for in the config.xml file. I see an image section but nothing seems to relate to the magnify script. I'm not trying to design or modify a skin, just trying to get it to work correctly *shrug* As far as the site goes I have it pulled down as I'm working on it. I don't want to leave it up because I do have people checking in on the new store development and don't want them thinking it's live when it's not.

Link to comment
Share on other sites

Ok, so the image you posted above, what are the dimensions of the source image? The javascript that powers the zoom-over uses the image found here:

<img src="http://www.store.com/images/source/original_image.jpg" style="display: none;">


There is an issue with CubeCart's use of PHP's function set that manipulates images: CubeCart will not make a derivation image bigger than the source image.


That is to say, if the skin's config.xml wants to make derivations of the source image at 600, 580, and 270 sizes, and the source image is only 225pixels, those supposedly larger sized derivations are going be 225 pixels -- no larger. (Therefore, it is very important to start with a large sized original source image -- at least as big as the largest size mentioned in the config.xml file.)


Now, from what I see in the image posted above, in "just trying to get it [the skin?] to work correctly," I think the original source image is 245pixels, and that's all the zoom over is going to show, yet the gallery image behind it is probably 400pixels -- but only because the HTML has been edited to force the browser to enlarge it to that size.

Link to comment
Share on other sites

This is the <image> section from my config.xml file. This is how it came with the skin


<image reference="thumbnail" maximum="120" quality="80" default="noimage_thumbnail.png" />
<image reference="category" maximum="270" quality="100" default="" /><!-- Doesnt need a default -->
<image reference="subcategory" maximum="120" quality="80" default="noimage_subcategory.png" />
<image reference="gallery" maximum="40" quality="60" default="noimage_gallery.png" />
<image reference="normal" maximum="270" quality="90" default="noimage_normal.png" />
<image reference="tiny" maximum="40" quality="60" default="noimage_thumbnail_tiny.png" />
<image reference="small" maximum="120" quality="80" default="noimage_thumbnail.png" />
<image reference="medium" maximum="270" quality="100" default="noimage_normal.png" />
<image reference="large" maximum="600" quality="100" default="" /><!-- Doesnt need a default -->
The original picture is 400x300 
Link to comment
Share on other sites

Is the skin you are using one of the stock skins? I am going to say, no.


So, if the original image in the /images/source/ folder is 400pixels, the skin is showing the picture at that size - instead of 'medium' at 270pixels, and the zoomer is showing the whole picture at 245pixels, then please check these lines in /js/common.js, starting near line 346:

    var magnify_options = {lensWidth:250, lensHeight:250, link:true, delay:250};
        var id    = $(this).attr('id');
        if (typeof gallery_json == 'object') {
            $('a.magnify > img#preview').attr({src: gallery_json[id].medium});
            $('a.magnify').attr({href: gallery_json[id].source}).unbind().magnify(magnify_options);

I can't find a way to switch it off, but the delay in activation can be set to a high number: 15000

Link to comment
Share on other sites

Oh in case someone reads this and wonders how to remove the "hover over image to zoom" text...



  1. Go into the skins template folder ( /public_html/skins/SKIN NAME/templates/ ) 
  2. Open the content.product file. ( /public_html/skins/ ??? /templates/content.product.php )
  3. Find this line and delete it. (You can search for hover and will usually be the first in the list)

               <p class="hover_zoom">{$LANG.catalogue.hover_zoom}</p>


Location of line on basic skins are as follows:


Crosshatch: Lines 10 / 11

Kurotuo: Line 91 

Mauris; Mican & Vanilla: Line 11

Nota: Line 93


This will vary depending on if you have an addon skins

Link to comment
Share on other sites

  • 7 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...