CubeCart Bot Posted February 6, 2018 Share Posted February 6, 2018 Name: e-Sharp (by WebCity) Price: Free Category: Skins Homepage: https://www.cubecart.com/extensions/skins/e-sharp-by-webcity Quote Link to comment Share on other sites More sharing options...
bsmither Posted June 2, 2019 Share Posted June 2, 2019 (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 June 5, 2019 by bsmither Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.