Pop up image and product page cannot scroll after clicking pop/full size image

-- HikaShop version -- : 4.0.0
-- Joomla version -- : 3.8.13
-- PHP version -- : 7.1
-- Browser(s) name and version -- : Google Chrome Version 76.0.3809.100 (64 bit)

Hi,

I have just noticed that product page single page, when the product image is clicked, the pop up window doesn't appear or pop up instead it forces web browser display full size image in the web browser (_self frame),

Also when exiting full size image or go back (using browser back button), the page stops working cannot scrolling or make selection on the text copy or select any part of the page, which seems that the page looked like it frozen.

Is it Javascript issue related?

I appreciate advice and support, many thanks.

Hi,

Yes, that's a javascript issue. The popup system used there is conflicting with your template javascript.
If you look at the console of your browser (F12) while displaying a product page on your website, you'll see some javascript error linked to the popup system.
The simplest will be to switch to another popup system.
I recommend you to change the "image popup mode" in the HikaShop configuration to "shadowbox (external)".
This should fix the problem.

Hi Nicolas

Many thanks for your prompt reply. Your suggestion did work well. "Shadowbox (external)"
Anyway, I am wondering how do we change the size of pop up at fixed uniform for all products?

I tried to change on option "Image resize during upload (width x height)" to 500 x 500 but it doesn't work. I created test page for "women pink jacket" for testing purposes.

I appreciate your input.

Regards

Hi,

This setting will do what you want. However, this means that you need to delete the images you have in your products and reupload them in each product one by one. At which point they will be resized to 500*500 and the popup will have the same size for all the images.
Alternatively, you could use an image batch processing software on your computer to process all the images in the images/com_hikashop/upload/ folder to have them at the correct size you want and then upload them back to that folder via FTP.

Thank you for your suggestion, thanks for that. I think that way is a good suggestion.

Anyway, when I viewed the test page in mobile device, the product image size looks not fit to width of the device and looking small, could this be due to template? Can it be adjusted with CSS to "force" the image optimised for mobile layout to be 100% fit to the width of device browser?

Many thanks in advance.

Hi,

Well, that's is made the shadowbox popup system for the display of images on mobile devices.
Changing that would require changing the code of the shadowbox popup library which is complex.
What I can propose as an alternative though is this plugin made by one of our partners:
www.hikashop.com/marketplace/product/117...pups-by-obsidev.html
It contains other image popup modes that you can use instead of the default ones.

Hi Nicolas.

Sorry I would had been more clearer.
I meant product thumbnail image in single product page in mobile device, not pop up image.
In mobile device, the product thumbnail does not fit to the width of page where it should be given that the normal thumbnail size is 400 x400 in settings config.

I look forward to your reply.

Hi,

Your screenshot looks like from a product in a products listing page, not from the product details page.
For the listings, you need to edit the menu item / module via the Joomla menu items manager / Joomla modules manager and change the thumbnails size settings under the products options tab / HikaShop options tab.
For the product details page, you can find the "Product page image (width x height)" setting in the Images section of the HikaShop configuration.