Adding Lightbox to magento V2

Last modified by magefan124 on Sun, July 11, 2010 11:38
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.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.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 ;)

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