Jump to content
Bryan_TAO

Images not enlarging on a mobile (iPhone 6)

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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}

 

Share this post


Link to post
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

Share this post


Link to post
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).

Share this post


Link to post
Share on other sites

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?

Image2.jpg

Image1.jpg

Share this post


Link to post
Share on other sites

The bottom image? That is the way it looks already (to me, anyway).

 

Share this post


Link to post
Share on other sites

Sorry! Image 2 is actually the top image as it uploaded!!! It's the top image I'd like to achieve - everything in line.

Share this post


Link to post
Share on other sites
Posted (edited)

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


×
×
  • Create New...