Adding Lightbox to magento V2

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

This is an old revision of the document!


checked with Magento 1.0

1. Download Lightbox from:

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

Don’t use the current one. Take this version: http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.03.3.zip

Because the current one doesn’t work with the prototype version of magento.

2. Copy the lightbox to magento

Create a directory: /js/lightbox

and copy the lightbox.js file to this directory

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

Create a diretory /skin/frontend/default/default/images/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(/skin/frontend/default/default/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(/skin/frontend/default/default/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(/skin/frontend/default/default/images/lightbox/nextlabel.gif) right 15% no-repeat; }

Please note: on my server /skin/ stays under document root. If you have installed magento into a subdirectory of document root, for example into a directory “magento” you have to write: /magento/skin/...

Open: /js/lightbox/lightbox.js

Replace:


var fileLoadingImage = "images/loading.gif"; 
var fileBottomNavCloseImage = "images/closelabel.gif";

with:


var fileLoadingImage = "../images/lightbox/loading.gif";        
var fileBottomNavCloseImage = "../images/lightbox/closelabel.gif";

4. Insert javascript and stylesheet into magento

open /app/design/frontend/default/default/layout/page.xml

insert into:

  1. <block type="page/html_head" name="head" as="head">
  2.           ....
  3. </block>

the following code:

  1. <action method="addJs"><script>lightbox/lightbox.js</script></action>
  2.  
  3. <action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>

5. Insert lightbox into magento product details

Open /app/design/frontend/default/default/template/catalog/product/view/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; ?>

Thats it!

Any questions?

Feel free to ask!

Sebastian Enders

enders ( at ) comvos.de


**EDIT FROM CHIARAWEB**

I will edit this page because any instructions not works for me: the path in js file is not correct because in this place you need to write an absolute path to your root directory

then the path to change in lightbox.js is not this:

../images/lightbox/loading.gif ../images/lightbox/closelabel.gif

but this:

/your-magento-folder/skin/frontend/default/default/images/lightbox/nextlabel.gif /your-magento-folder/skin/frontend/default/default/images/lightbox/closelabel.gif

with your code the browser search the labels in a wrong link

Cheers Chiaraweb Italy




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs