One of Magento's little annoyances is the main image preview method - like everything else about Magento, it comes with bells and whistles. Is that a bad thing? Well, yes.
Before I complain, look at the original zoomer.
I'd argue whether the average user needs to zoom into an image using the a slider, because imo, they wither want to see the whole image or as much detail as possible (maximum zoom). Luckily the front end is much easier to change than the back end, so I've made my own zoomer tool which is infinitely easier to use (because you can't actually control anything) you just roll the mouse pointer over the image, a little box will appear that shows a portion of the actual image with maximum zoom. Move the mouse pointer and the zoomed image will be updated accordingly.
Easy, peasy, nifty.
It was written specificly for Magento 1.1 so uses Prototype 1.4 instead of the latest.
To use it, follow similar instructions to installing lightbox:
Put the .js in the main js folder: /js/huy/.
Put the .css in your theme's css folder: /skin/frontend/default/default/css/huy/
In /app/design/frontend/default/default/template/catalog/product/view/ delete the following lines:
-
<p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
-
<div class="image-zoom" id="track_outer">
-
<img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
-
<div id="track">
-
<div id="handle"></div>
-
</div>
-
<img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
-
</div>
-
<script type="text/javascript">
-
Event.observe(window, 'load', function() {
-
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out');
-
});
-
</script>
You may want to change the styling of zoomer.css to taste.
Remember to minify it!
