Adding OMViewer with lightbox to magento V1

Last modified by stuger71512001 on Thu, June 24, 2010 16:43
Source|Old Revisions  

This is an old revision of the document!

1. Download OMViewer for Magento

Download link Unzip folder.

2. Copy the files to magento

copy all files of Zip file, which you have just downloaded to /skin/frontend/default/default/js/

3. Insert javascript and stylesheet into magento

Open: /app/design/frontend/default/default/layout/page.xml

In page.xml insert into

  1. <block type="page/html_head" name="head" as="head">
  2.           ....
  3. </block>

the following code:

  1. <!--Beginn zoom4magento -->           
  2.  <action method="addItem"><type>skin_js</type><name>js/zoom4magento/js/mootools.js
  3.  </name></action>
  4.  <action method="addItem"><type>skin_js</type><name>js/zoom4magento/js/swfobject.js
  5.  </name></action>
  6.  <action method="addItem"><type>skin_js</type><name>js/zoom4magento/js/videobox.js
  7.  </name></action>
  8.  <action method="addCss"><stylesheet>js/zoom4magento/css/videobox.css</stylesheet>
  9.  </action>
  10. <!--End zoom4magento   -->

Then, uncomment or delete the following code.

<action  method="addJs"><script>prototype/prototype.js</script></action>

4. Insert OMViewer with lightbox into magento product details

Open /app/design/frontend/default/default/template/catalog/product/view/media.phtml

In media.phtml replace:

  1. <p class="product-image-zoom">
  2.  <?php
  3.  $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
  4.  echo $_helper->productAttribute($_product, $_img, 'image')
  5.  ?>
  6. </p>
  7. <p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>


  1. <p class="a-center">
  2.  <a href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" rel="vidbox 600 400" title="<?php echo $_product->getName();?>">
  3. <img src="/<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" width="200" height="200" alt=""/></a>
  4. </p>
  5. <p class="a-center" id="track_hint"><?php echo $this->__('Click on above image to view full picture') ?></p>

In media.phtml delete or uncomment the following code

<div class="image-zoom" id="track_outer">
 <img id="zoom_out" src="/" alt="" class="btn-zoom-out" />
 <div id="track">
 <div id="handle"></div>

 <img id="zoom_in" src="/" alt="" class="btn-zoom-in" />

<script type="text/javascript">
 Event.observe(window, 'load', function() {
 product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');

In media.phtml replace:

  1. <?php foreach ($this->getGalleryImages() as $_image): ?>
  2.   <li>
  3.      <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resizable=yes');return false;">
  4.      <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68,68); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
  5.      </a>
  6.   </li>
  7. <?php endforeach; ?>


  1. <?php foreach ($this->getGalleryImages() as $_image): ?>
  2.  <li>       
  3. <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="vidbox 600 400" title="<?php echo $_product->getName();?>">
  4. <img src="/<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a>
  5.  </li>
  6.  <?php endforeach; ?>

5. Refresh Cache

Log into Admin Dashboard then System > Cache Management and be sure to change All cache setting from No change to REFRESH and then click the Images Cache - Clear button

Thats it!