Adding Lightbox to magento V2

Last modified by KKKonrad on Thu, June 24, 2010 16:42
Source|Old Revisions  

This is an old revision of the document!


Checked with Magento 1.0, 1.1.1. Checked also with 1.1.6 in Modern Theme

1. Download Lightbox

http://www.huddletogether.com/projects/lightbox2/

version 2.04 works fine in Magento 1.1.6.

Comment: For me, IE crashed with the message “Operation aborted” ( Magento 1.1.6 & Lightbox 2.04 ).
To fix the problem I had to Downgrade lightbox to ver 2.03

Unzip folder.

2. Copy the lightbox to magento

Go to /skin/frontend/default/default/js/

Create a directory: /lightbox

and copy the lightbox.js file to this directory

NOTE Put lightbox.js in /magento/js/lightbox/ directly if it doesn’t work for you. At least in Magento 1.1.6 this is the case. The js is found in the root /js/ folder instead of the local template.

Copy lightbox.css to /skin/frontend/default/default/css/

Go to /skin/frontend/default/default/images/

Create a directory /lightbox/

and copy all images from the lightbox into it.

3. Change image directory location of the lightbox

Open: /skin/frontend/default/default/css/lightbox.css

and

replace:


  background: transparent url(../images/blank.gif) no-repeat;

with:


  background: transparent url(../images/lightbox/blank.gif) no-repeat;

Replace:


  #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

with:


  #prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }

Replace:


  #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

with:


  #nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

Open: /skin/frontend/default/default/js/lightbox/lightbox.js

Replace:


    fileLoadingImage:        'images/loading.gif',     
    fileBottomNavCloseImage: 'images/closelabel.gif',

with:


    fileLoadingImage:        SKIN_URL + 'images/lightbox/loading.gif',     
    fileBottomNavCloseImage: SKIN_URL + 'images/lightbox/closelabel.gif', 

Open: /app/design/frontend/default/default/template/page/html/head.phtml

In head.phtml find


<script type="text/javascript">
    var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
    var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
</script> 

replace with


<script type="text/javascript">
    var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
    var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
    var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>';
</script> 

4. 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. <action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
  2. <action method="addCss"><stylesheet>css/lightbox/lightbox.css</stylesheet></action>

AFTER the prototype.js. It is recommended to add the two lines where the list of js and css files intersect so it will look something like this:

  1. ...
  2. <action method="addJs"><script>mage/cookies.js</script></action>
  3. <action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
  4. <action method="addCss"><stylesheet>css/lightbox/lightbox.css</stylesheet></action>
  5. <action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
  6. ...

5. Insert lightbox into magento product details

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

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="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" 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=""/>
  5.      </a>
  6.   </li>
  7. <?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!

Sebastian Enders

enders ( at ) comvos.de


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




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs