Huy Dinh » zoomer http://huydinh.co.uk/blog Just 8 bit crazy about coding Sat, 23 Jan 2010 11:47:36 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Replacement zoomer for Magento http://huydinh.co.uk/blog/2008/08/31/replacement-zoomer-for-magento/ http://huydinh.co.uk/blog/2008/08/31/replacement-zoomer-for-magento/#comments Sun, 31 Aug 2008 11:57:55 +0000 Huy Dinh http://huydinh.co.uk/blog/?p=40 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.

See a demo and download it.

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:

PLAIN TEXT
PHP:
  1. <p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
  2. <div class="image-zoom" id="track_outer">
  3.     <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" />
  4.     <div id="track">
  5.         <div id="handle"></div>
  6.     </div>
  7.     <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" />
  8. </div>
  9. <script type="text/javascript">
  10.     Event.observe(window, 'load', function() {
  11.         product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out');
  12.     });
  13. </script>

You may want to change the styling of zoomer.css to taste.

Remember to minify it!

]]> http://huydinh.co.uk/blog/2008/08/31/replacement-zoomer-for-magento/feed/ 1