Jump to content

Images not enlarging on a mobile (iPhone 6)


Bryan_TAO

Recommended Posts

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.

 

Img_1291a.jpg

Img_1292a.jpg

Link to comment
Share on other sites

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

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

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!

Spacing.jpg

Link to comment
Share on other sites

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...