Ultimate New Media, Inc

Magento Zoom Reset Option

When recently working on a Magento Enterprise project, a client requested a reset button be added for the product zoom feature because while switching between different product images, a new image would load in the current zoom state.  As it turns out, adding this feature is quite simple.

1. Add a button (or trigger of your choice) to initiate the reset:

<input type=”button” value=”Reset” id=”zoom_reset” />

This should be done in the media template: /app/design/frontend/enterprise/**/template/catalog/product/view/media.phtml

2. Pass this button’s id to the Product.Zoom call:

<script type=”text/javascript”>

Event.observe(window, ‘load’, function() {

product_zoom = new Product.Zoom(’image’, ‘track’, ‘handle’, ‘zoom_in’, ‘zoom_out’, ‘track_hint’, ‘zoom_enlarge’, ‘zoom_reset‘);

});

</script>

3. Update the Product.Zoom class in /js/varien/product.js to prepare the zoom reset id:

initialize: function(imageEl, trackEl, handleEl, zoomInEl, zoomOutEl, hintEl, enlargeEl, resetEl){

this.resetEl = $(resetEl);

4. Bind this element to a new function that will handle the reset:

Event.observe(this.resetEl, ‘click’, this.resetImage.bind(this));

5. Add the resetImage function:

resetImage: function() {

this.scale(0);

this.slider.setValue(0);

},

As you can see, this is a pretty straight forward method for resetting the image to the full view position.