[Resolved] How Do I Change The Product Magnification Level

[quantument]

I am trying to change the magnification level on zoom of a product. At the moment, when I have over an image, the magnification is x1, even though the product image is much larger.

I have tried changing content.product.php below:

{if $PRODUCT.magnify}
                    <a href="{$PRODUCT.source}" class="magnify" title="{$PRODUCT.name}" rel="">
                      <img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="preview" />
                    </a>
                    <p class="hover_zoom">{$LANG.catalogue.hover_zoom}</p>
                {else}
                    <img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="preview" />
                {/if}

to

{if $PRODUCT.magnify}
                    <a href="{$PRODUCT.source}" class="magnify" title="{$PRODUCT.name}" rel="">
                      <img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="preview" />
                    </a>
                    <p class="hover_zoom">{$LANG.catalogue.hover_zoom}</p>
                {else}
                    <img src="{$PRODUCT.large}" alt="{$PRODUCT.name}" id="preview" />
                {/if}

But this hasn't worked.

My website is at http://www.quantumenterprises.co.uk

My skin is a modified version of a responsive skin from http://www.rickyswebtemplates.com

Many thanks

[bsmither]

I think a CSS rule in common.css (for this skin) is interfering with the image being shown by the Magnifier Lens.

Please try this -- in the file /js/plugins/jquery.magnifier.js:

Near line 54:
magnifier.$largeImage.attr('src', magnifier.a.href).css('display', 'none');

Change to:
magnifier.$largeImage.attr('src', magnifier.a.href).css({'display':'none','max-width':'none'});

Then force the browser to reload the page resources (javascript, css, images).

[quantument]

That sorted it. Many thanks for your help.