Adding OMViewer with lightbox to magento V1
This is an old revision of the document!
Table of Contents
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
- <block type="page/html_head" name="head" as="head">
- ....
- </block>
the following code:
- <!--Beginn zoom4magento -->
- <action method="addItem"><type>skin_js</type><name>js/zoom4magento/js/mootools.js
- </name></action>
- <action method="addItem"><type>skin_js</type><name>js/zoom4magento/js/swfobject.js
- </name></action>
- <action method="addItem"><type>skin_js</type><name>js/zoom4magento/js/videobox.js
- </name></action>
- <action method="addCss"><stylesheet>js/zoom4magento/css/videobox.css</stylesheet>
- </action>
- <!--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:
- <p class="product-image-zoom">
- <?php
- $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
- echo $_helper->productAttribute($_product, $_img, 'image')
- ?>
- </p>
- <p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
with
- <p class="a-center">
- <a href="http://your-domain.com/SUBDIRECTORY/skin/frontend/default/default/js/zoom4magento/swf/view.swf?image=<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" rel="vidbox 600 400" title="<?php echo $_product->getName();?>">
- <img src="/<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" width="200" height="200" alt=""/></a>
- </p>
- <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>
</div>
<img id="zoom_in" src="/" alt="" 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', 'track_hint');
});
</script>
In media.phtml replace:
- <?php foreach ($this->getGalleryImages() as $_image): ?>
- <li>
- <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resizable=yes');return false;">
- <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()) ?>"/>
- </a>
- </li>
- <?php endforeach; ?>
with:
- <?php foreach ($this->getGalleryImages() as $_image): ?>
- <li>
- <a href="http://your-domain.com/SUBDIRECTORY/skin/frontend/default/default/js/zoom4magento/swf/view.swf?image=<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="vidbox 600 400" title="<?php echo $_product->getName();?>">
- <img src="/<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a>
- </li>
- <?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!
