Jump to content
Sign in to follow this  
CubeCart Bot

e-Sharp (by WebCity)

Recommended Posts

Posted (edited)

There is a problem with this skin (and probably with all WebCity "e-Skins") which has to do with CubeCart's commonly provided Magnifier for CC5-based skins on the View Product page. This magnifier shows a box - the 'lens' - having the same size as the product's preview image, and that contains the product's source image (presumably larger than the rendered preview sized image). This gives the illusion of a magnifier, when in reality, it is just a small window on the (larger?) source image.
The problem is with the Magnifier's 'sensor', the region of a mouse-hovering detector that triggers the 'lens' to activate. This 'sensor' is positioned by asking the browser to report on the location of the preview image.

When viewing this skin on a device viewport less than 650 pixels wide -- a 'mobile' device, there is javascript that moves several blocks of HTML to a different location, such as the Newsletter Subscription box to the bottom of the page from where it is normally at the top. This action consequently moves the product image gallery up by approximately 150 pixels - but the 'sensor' has already been positioned.

The result is that the sensor is sitting too low relative to the product image preview, and also covers the gallery thumbnails such that they cannot be hovered/selected.

The following edits add commands at key events that re-initialize the Magnifier's 'sensor' after the page restructuring has settled down, and also when the mobile device rotates from portrait to landscape and back.

The first edit is in the skin's /js/script.js file:

Near line 68, find:

    // Mobile
    match : function() {
        $('#utility').append($('#session'));
        $('#utility').append($('#basket_summary'));
        $('#mobile-maillist-wrapper').append($('#maillistbox'));
        $('.cycle-slideshow img').each(function(){
            if($(this).attr('src') != $(this).data('lofi')){
                $(this).attr('src',$(this).data('lofi'));
            }
        });
    },  

Change to:

    match : function() {
        $('#utility').append($('#session'));
        $('#utility').append($('#basket_summary'));
        $('#mobile-maillist-wrapper').append($('#maillistbox'));
        $('.cycle-slideshow img').each(function(){
            if($(this).attr('src') != $(this).data('lofi')){
                $(this).attr('src',$(this).data('lofi'));
            }
        });
        $('#dio-lens, #dio-sensor').remove();
        $('a.magnify').magnify({lensWidth:250,lensHeight:250,link:true,delay:250});
    },

The second edit is to CubeCart's common /js/common.js file:

Near line 350, find:

        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);
        }
    });

Change to:

        if (typeof gallery_json == 'object') {
            $('a.magnify > img#preview').attr({src: gallery_json[id].medium});
            $('a.magnify').attr({href: gallery_json[id].source});/*OLD .unbind().magnify(magnify_options)*/
/*NEW*/$('#dio-lens, #dio-sensor').remove();
/*NEW*/$('a.magnify').magnify(magnify_options);
        }
    });
/*NEW*/$( window ).resize(function() { if($('.magnify img').length){ $('#dio-sensor').css( $('.magnify img').offset() ); } });
Edited by bsmither

Share this post


Link to post
Share on other sites

Join the conversation

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

Guest
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.

Sign in to follow this  

×
×
  • Create New...