Results 1 to 6 of 6

Thread: Magnify JS V1.11 not working on Mobile Site

  1. #1
    Join Date
    Nov 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Magnify JS V1.11 not working on Mobile Site

    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
    Last edited by Beverleyh; 12-01-2014 at 11:42 AM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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" />
    DD Admin

  4. #4
    Join Date
    Nov 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Magnify JS V1.11 not working on Mobile Site

    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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Screenshot_2014-12-01-13-33-30.jpg 
Views:	79 
Size:	5.0 KB 
ID:	5557  

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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:

    Code:
    <script>
    
    jQuery('#productshot').imageMagnify({
     magnifyby: 5,
     humbdimensions: [90, 68] //specify image's pre magnification dimensions
    })
    
    </script>
    That should do it.
    DD Admin

Similar Threads

  1. How to make images not load on a mobile site?
    By PaulV in forum Looking for such a script or service
    Replies: 5
    Last Post: 10-27-2017, 10:39 PM
  2. Replies: 0
    Last Post: 03-02-2014, 12:59 PM
  3. Resolved Making my site viewable on a mobile device
    By chadlexmorgan in forum General Paid Work Requests
    Replies: 3
    Last Post: 09-12-2013, 10:40 PM
  4. Mobile Site
    By nate51 in forum HTML
    Replies: 6
    Last Post: 09-16-2011, 09:27 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •