PDA

View Full Version : Magnify JS V1.11 not working on Mobile Site



bunny255
11-30-2014, 07:08 AM
1) Script Title: Magnify JS V1.11

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagemagnify.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
12-01-2014, 11:42 AM
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
12-01-2014, 07:19 PM
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
12-01-2014, 09:38 PM
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
12-02-2014, 01:22 PM
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
12-04-2014, 08:37 PM
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.