Post by GWShop » Mon Jul 12, 2021 10:52 pm

Hi. Can someone explain me step by step how can images in my products appear in full size?

Right now all the images in products open and showup in a small window. I remember there was a Settings menu somewhere. Can someone tell me from which menu I can set both the main images and the additional images to open at the 100% of their original size?

Thank you.
Last edited by GWShop on Tue Jul 20, 2021 3:37 pm, edited 1 time in total.

New member

Posts

Joined
Mon May 24, 2021 1:46 am

Post by Cue4cheap » Mon Jul 12, 2021 11:59 pm

GWShop wrote:
Mon Jul 12, 2021 10:52 pm
Hi. Can someone explain me step by step how can images in my products appear in full size?

Right now all the images in products open and showup in a small window. I remember there was a Settings menu somewhere. Can someone tell me from which menu I can set both the main images and the additional images to open at the 100% of their original size?

Thank you.
What version?
What theme?
Any extensions installed to show the products images or stock product page?

Let's start with that info... but I'd bet there isn't a "setting" you choose but you'll need to use an extension or make modifications. The search function of the forum could be helpful to try.
Mike

cue4cheap not cheap quality


Expert Member

Posts

Joined
Fri Sep 20, 2013 4:45 am

Post by vaidyamanishjoshi » Thu Jul 15, 2021 1:04 am

You can try with changing script at bottom in catalog/view/theme/default/template/product/product.twig

Code: Select all

$(document).ready(function() {
	$('.thumbnails').magnificPopup({
		type:'image',
		delegate: 'a',
		gallery: {
			enabled: true
		}
	});
});
To

Code: Select all

$(document).ready(function() {
	$('.thumbnails').magnificPopup({
		type:'image',
		delegate: 'a',
		gallery: {
			enabled: true
		}
            callbacks: {
                    resize: changeImagegSize,
                    imageLoadComplete:changeImagegSize,
                    change:changeImagegSize
                }
	});
});

 function changeImagegSize(){
            var img = this.content.find('img');
            img.css('max-height', '100%');
            img.css('width', 'auto');
            img.css('max-width', 'auto');
        }

** Important... not tested.... and you have not mentioned oc version too... so take backup of your files before trying it...

Active Member

Posts

Joined
Tue Jun 09, 2015 2:47 am

Post by GWShop » Sat Jul 17, 2021 1:47 am

Version 3.0.3.7.
Spare Parts theme.

New member

Posts

Joined
Mon May 24, 2021 1:46 am

Post by GWShop » Tue Jul 20, 2021 3:37 pm

No need for editing code.

The solution is in Extensions/Extensions/Choosing Themes from the drop-down menu/Editing my theme and from the new page we edit:
Product image thumb size: 640x360
Product Image Popup Size: 1280x720

Can't believe that nobody knew this.

New member

Posts

Joined
Mon May 24, 2021 1:46 am

Post by OSWorX » Wed Jul 21, 2021 5:27 pm

GWShop wrote:
Tue Jul 20, 2021 3:37 pm
No need for editing code.

The solution is in Extensions/Extensions/Choosing Themes from the drop-down menu/Editing my theme and from the new page we edit:
Product image thumb size: 640x360
Product Image Popup Size: 1280x720

Can't believe that nobody knew this.
Everybody who work with OpenCart knows that - it's the standard way to define the image sizes.
But (as always), some themes/templates use their own settings, so sometimes it depends also on the used theme.
So, no reason to impress with your limited knowledge ..

Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.


User avatar
Guru Member

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria
Who is online

Users browsing this forum: nonnedelectari and 98 guests