ElevateZoom window – resizing, positioning and styling

Maybe someone is interested in changing the zoom window.
I want to see the product name and price, when using the zoom feature.

You can find the function call in:

/design/frontend/Default/jm_summer/template/catalog/product/view/media.phtml <-ALWAYS BACKUP!

Change the call to:

Code:

jQuery("#image").elevateZoom({
			scrollZoom 		: false,
			borderSize		: 1,
			borderColour 		: "rgb(136,136,136)",
			tintColour 		: "#e7e7e7",
			zoomWindowWidth 	: 580,
			zoomWindowHeight 	: 580,
			zoomWindowPosition	: 1,
			zoomWindowOffetx	: 10,
			zoomWindowOffety	: 65,
			zoomWindowFadeIn	: 500,
			zoomWindowFadeOut	: 500,
			lensFadeIn		: 500,
			lensFadeOut		: 500, 
		});

And as I changed the border, I put a box-shadow to the zoomwindow in:

/Skin/frontend/Default/\jm_summer/js/jquery.elevatezoom.js <- ALWAYS BACKUP!
See readme.txt in that directory!

search for: "//if window zoom" to find self.zoomWindowStyle variable and insert before last position property:

Code:

+ "box-shadow: 4px 5px 3px rgba(136,136,136,0.5);"

1 answer

Please login or Register to Submit Answer

Written By

Comments