Bryan_TAO Posted June 1, 2019 Share Posted June 1, 2019 Hi Can anyone help with this please? Cubecart 6.2.5 Skin: e-sharp When I call up a product on my PC that has multiple images the hover-zoom function does not work .. the zoom square appears but it is not zoomed. When I do the same on my iPhone 6 the main image appears as do the the additional images that are uploaded for that product ... but I cannot enlarge the main image nor can I view any of the secondary images because a non-working zoom box appears on top of them. Please see attached photos. URL is https://www.nativasbuxton.co.uk/Webshop/shoes/candles-burners-etc/incense-holder.html If needs be I'd be happy to lose the "zoom" feature altogether just leaving the customer to choose what image they want to view. Thank you in anticipation! Bryan. Link to comment Share on other sites More sharing options...
bsmither Posted June 1, 2019 Share Posted June 1, 2019 In my experiments with Firefox's Responsive Design Mode, I find that the "Touch" emulator requires that I 'tap' (actually a mouse-click) on an area of the zoom box to make the box re-position itself in that direction. That is to say, to position the box upward (to see the top area of the image), I 'tap' inside the box near the upper edge of it. The box then centers on the tapped spot. However, there is some difficulty getting the zoom box to work correctly. The "sensor" component does not sit directly on top of the image, but a bit downward that covers the gallery - thus inhibiting the hover and click events on those images. My theory is that this may have to do with the browser having not fully settled the positioning of the objects on the page when the position of the "sensor" is calculated. This is especially true when the browser needs to rearrange objects because the mobile viewport is less than 650 pixels wide and that brings into play different CSS rules. I will see if the "sensor" positioning can be called once the page settles down. Link to comment Share on other sites More sharing options...
BryanTAO Posted June 1, 2019 Share Posted June 1, 2019 The zoom function doesn’t work on a PC either - it just shows at 1:1 As mentioned, I’d happily take it off if I could. Thank you for your help. Bryan Link to comment Share on other sites More sharing options...
bsmither Posted June 1, 2019 Share Posted June 1, 2019 Regarding the apparently non-zooming magnifier, the image being shown in the "lens" is the image as found in the /images/source/ folder -- at that size! That is to say, the Magifier javascript does not tell the browser to make it bigger -- the javascript says to show the image from the true source. That said, I suggest that all images in the /source/ folder be at 600x600 pixels. CubeCart will make an appropriately-sized image for the product page (270px on the longest side) -- however, CubeCart makes appropriately-sized images no larger than the source's size. To remove the Magnifier effect, in the content.product.php template, near line 16: Find: {if $PRODUCT.magnify} Change to: {if false and $PRODUCT.magnify} Link to comment Share on other sites More sharing options...
Bryan_TAO Posted June 2, 2019 Author Share Posted June 2, 2019 That's perfect! Thank you. Also; thank you for the heads up on image sizing ... because now I presume I'll need a larger source image to have that larger image display on a mouse click/tap? I can't help thinking that it's a great pity that knowledge such as yours about the image handling in general couldn't be added to the Help section on the actual software Finally; if I may ... how do I space out the images in this same skin for a mobile screen - please see attached. As times before, thank you very much! Link to comment Share on other sites More sharing options...
bsmither Posted June 2, 2019 Share Posted June 2, 2019 In the skin's file /styles/common.css, add the following rule: #gallery_select img { padding: 0 5px; } You may need to have CubeCart clear its internal cache, and/or force your browser to reload page resources (usually by CTRL-F5). Link to comment Share on other sites More sharing options...
Bryan_TAO Posted June 2, 2019 Author Share Posted June 2, 2019 AND again! Thank you!!!! Link to comment Share on other sites More sharing options...
Bryan_TAO Posted June 3, 2019 Author Share Posted June 3, 2019 Dare I ask? I haven't started a new topic because it's a "silly" request. My client is asking if the basket at the top right of the screen can be lined up as per image 2 attached? Link to comment Share on other sites More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 The bottom image? That is the way it looks already (to me, anyway). Link to comment Share on other sites More sharing options...
Bryan_TAO Posted June 3, 2019 Author Share Posted June 3, 2019 Sorry! Image 2 is actually the top image as it uploaded!!! It's the top image I'd like to achieve - everything in line. Link to comment Share on other sites More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 This is sort of tricky as changes to other things could skew this out of alignment. In the skin's common.css file: Near line 643, find: #utility #basket_summary .basket_total, #utility #basket_summary .view_basket{ display:inline-block; } Change to: #utility #basket_summary .basket_total, #utility #basket_summary .view_basket{ display:inline-block; line-height: 32px; } Link to comment Share on other sites More sharing options...
Bryan_TAO Posted June 3, 2019 Author Share Posted June 3, 2019 I'll give that a try ... Worse case scenario is it has to stay as it is. Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.