Adding OMViewer with lightbox to magento V1

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

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!


Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs