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>

5. 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>

with

  1. <p class="a-center">
  2.  <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();?>">
  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>
 </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:

  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; ?>

with:

  1. <?php foreach ($this->getGalleryImages() as $_image): ?>
  2.  <li>       
  3. <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();?>">
  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; ?>

6. 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!

Any questions?

Feel free to ask! Dang stuger71512001 ( at ) gmail.com


IF THE ABOVE DOES NOT WORK (and it didn’t for me v1.1.2) try this http://www.magentocommerce.com/boards/viewreply/31397/

Also, you can try putting in absolute URLs for the images when editing lightbox.js as putting in what has been advised (i.e. putting SKIN +...) can break the script.


[edit] Works fine with Lightbox 2.04, Modern Theam and Magento 1.1.6 - However I had to put lightbox.js in /js/lightbox/ folder, not /skin/frontend/default/default/js/

Hence..

Go to: /js Create a directory: /lightbox and copy the lightbox.js file to this directory

Also my uploads went into ...frontend/default/modern... instead of ...frontend/default/default...

[edit] For me on Version 1.1.6 with modern theme, I need to change on “app/design/frontend/default/modern/layout/page.xml” Replace: <action method=”addCss”><stylesheet>css/lightbox.css</stylesheet></action>

To: <action method=”addCss”><stylesheet>css/lightbox/lightbox.css</stylesheet></action>

7. Adding Lightbox to base image (by konrad1983@gmail.com)

At the end of lightbox.js replace:

  1. document.observe('dom:loaded', function () { new Lightbox(); });

to:

  1. var myLightbox;
  2. document.observe('dom:loaded', function () { myLightbox = new Lightbox(); });

In media.phtml you should replace:

  1. <?php
  2.         $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
  3.         echo $_helper->productAttribute($_product, $_img, 'image')
  4.     ?>

to:

  1.     <?php
  2.         $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'"  ondblclick="myLightbox.start($('imageLink'));"/>';
  3.         echo $_helper->productAttribute($_product, $_img, 'image')
  4.     ?>
  5.     <a href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" id="imageLink" rel="lightbox"></a>

and next find:

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

and replace with:

  1. <script type="text/javascript">
  2.     Event.observe(window, 'load', function() {
  3.         product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
  4.     Event.stopObserving($('image'), 'dblclick', null);
  5.     });
  6. </script>

I think that this should help someone ;)

Cary 2009/05/27 00:49

you need to escape the imageLink with forwardslashes in order to avoid the php string error. I cannot show an example here due to the wiki code stripping out forwardslashes.

==== THE JAVA SCRIPT FILES ====

Please be aware that prototype.js and scriptoacoulos.js and others... this lib are loaded by deafault to normal ops in Magento and that must be cleared that You will not find them better when loaded twice.

You should put lightbox.js to modern blue or default. Depends of theme set up. The other issue is the way of creating special css file with couple of lines for lighbox. The same results will find put them to boxes.css (loaded by default).

Please adjust above manual with box of light to your needs and try to use as guide not a pattern the images path you must modyfied to your paths not to this manual...

upiter - Primola




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs