Rich-text Reply

How can i show part of an image instead of full images?

WFJAMES 08-18-16

How can i show part of an image instead of full images?

We are looking to run a test on our product details page, eg http://www.weirdfish.co.uk/p/men/macaroni-sweatshirts/i/siren-1-4-zip-active-macaroni-sweatshirt-chi...

we currently use full image for colour selection but would like to test swatches so I'd like to just show the middle square of the existing image the full size of the image is 272 pixels would like to show the middle 80 pixels but then resize down to 48 pixels square?

 

thanks in advance

Level 2

DavidS 08-19-16
 

Re: How can i show part of an image instead of full images?

Hi WFJAMES,

 

Thanks for reaching out to Optimizely Support!

Have you tried using the Visual Editor to make these changes? If so, where were you blocked? 

 

If the Visual Changes you are looking to make are too complex, I would recommend to reach out to your developer who should be able to write the custom jQuery code necessary to show the right elements and achieve the zooming effect you are looking to get. 

 

Feel more than free to reply back with any additional questions at all.

 

Best,
David

 

Optimizely
WFJAMES 08-19-16
 

Re: How can i show part of an image instead of full images?

Hi David

Thanks for your replay I managed it in the end by creating a CSS class within the experiment CSS and then applying that class to the required images

.crop {
overflow: hidden;
width: 80px;
height: 80px;
}
.crop img {
width: 272px;
height: 272px;
margin: -130px -110px;
}

$(".product-color-selector > a").addClass("crop")
Level 2