Magnify JS V1.11 not working on Mobile Site

[bunny255]

1) Script Title: Magnify JS V1.11

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agemagnify.htm

3) Describe problem: I install the code to my website and it works fine on the regular website.
However on mobile version, when the thumbnail is clicked only a horizontal line, not the magnified image will be displayed.

Test Image:
http://www.tekarbon.com/zenzen/2007-2011-honda-carbon-fiber-side-panels-cbr-600rr-p-198.html?cPath=2_18

[Beverleyh]

I just checked in IE11, Chrome and Firefox - pulling the width in to mobile proportions - and can't see a horizontal line.

In what circumstances are you seeing it? Is it only on certain devices/browsers?

[ddadmin]

Try giving your thumbnail image explicit width/height attributes. Generally this is required in order for the script to know how to scale the magnified image. For example:

<div id="productDescription" class="productGeneral biggerText"><p><img src="/Product_images/Honda/CBR600RR-07-11/side panels/Honda CBR600RR 07 11 Side Panels (2).jpg" class="magnify" data-magnifyby="5" width="90" alt="2007 - 2011 Honda CBR 600RR Side Panels" style="width:70px; height:52px" />

[bunny255]

I am using Chrome on my mobile phone and I added the width and height which is suggested by DD Admin and reload the page, I still only see a grey horizontal line.

Please see screenshot attached from Mobile Phone with Chrome browser.

[Beverleyh]

You seem to be linking to a few versions of jQuery so try taking all but one out to see if that helps.

Also try removing all the other scripts and adding them back one-by-one while you troubleshoot.

[ddadmin]

The problem seems to be that the script cannot pick up on the dimensions of the thumbnail image for some reason. It might have something to do with the fact that the thumbnail is inside an accordion on smaller devices, which collapses the dimensions of everything in it.

One way around this is to directly initialize the magnify script on the thumbnail image, which lets you pass into it explicit dimensions of the thumbnail. To do this, in your HTML, locate the thumbnail markup, and remove the class="magnify" attribute while adding an unique ID to it:

<img style="cursor: url(&quot;/magnifier/magnify.cur&quot;), zoom-in; opacity: 1;" src="/Product_images/Honda/CBR600RR-07-11/side panels/Honda CBR600RR 07 11 Side Panels (2).jpg" class="magnify" data-magnifyby="5" alt="2007 - 2011 Honda CBR 600RR Side Panels" width="90" id="productshot">

Then, following this HTML, add the JavaScript below:

<script>

jQuery('#productshot').imageMagnify({
 magnifyby: 5,
 humbdimensions: [90, 68] //specify image's pre magnification dimensions
})

</script>

That should do it.