We had a client that wanted to disable the double click feature of the main product image in Magento, but still be able to click on the thumbnail images to expand them. We think this is a great little feature and will be implementing on more sites of ours.
Here’s how to do it:
Go to js/varien/product.js
Find this code:
this.scale(0);
Event.observe(this.imageEl, ‘dblclick’, this.toggleFull.bind(this));
Event.observe($(zoomInEl), ‘mousedown’, this.startZoomIn.bind(this));
Event.observe($(zoomInEl), ‘mouseup’, this.stopZooming.bind(this));
Event.observe($(zoomInEl), ‘mouseout’, this.stopZooming.bind(this));
Event.observe($(zoomOutEl), ‘mousedown’, this.startZoomOut.bind(this));
Event.observe($(zoomOutEl), ‘mouseup’, this.stopZooming.bind(this));
Event.observe($(zoomOutEl), ‘mouseout’, this.stopZooming.bind(this));
},
and comment out the second line of code, like this:
this.scale(0);
//Event.observe(this.imageEl, ‘dblclick’, this.toggleFull.bind(this));
Event.observe($(zoomInEl), ‘mousedown’, this.startZoomIn.bind(this));
Event.observe($(zoomInEl), ‘mouseup’, this.stopZooming.bind(this));
Event.observe($(zoomInEl), ‘mouseout’, this.stopZooming.bind(this));
Event.observe($(zoomOutEl), ‘mousedown’, this.startZoomOut.bind(this));
Event.observe($(zoomOutEl), ‘mouseup’, this.stopZooming.bind(this));
Event.observe($(zoomOutEl), ‘mouseout’, this.stopZooming.bind(this));
},
Save the file. Now, when you look at your products in Magento, the main image still shows up, you can still zoom in and out with the slider, but double clicking has no effect. We also moved the code that said “Double click on above image to view full picture” that is in your theme/template/catalog/product/view/media.phtml file to the end of the file and changed wording to “Click above image for larger view”.
That’s kind of the summary of how we disabled the double click to zoom feature in Magento.