Replacement zoomer for Magento
by Huy Dinh on Aug.31, 2008, under PHP, Random
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!
1 Comment for this entry
Leave a Reply
-
Howdy. Welcome to Huy Dinh!
Thanks for dropping by! Feel free to join the discussion by leaving comments, and stay updated by subscribing to the RSS feed. See ya around!
May 19th, 2009 on 17:50
Hi,
This looks great, thanks!
Any test done in 1.3 before i go and scratch my head?
Thanks