Try the Demo

Magento

  • Home
  • Wiki
  • 4 - Themes And Template Customization
  • Catalog
  • Adding Lightbox to magento V2

Adding Lightbox to magento V2

Last modified by gdoteof on Thu, June 24, 2010 17:42
Source|Old Revisions  

This is an old revision of the document!

Table of Contents

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 = SKIN_URL + "images/lightbox/loading.gif";        
var fileBottomNavCloseImage = SKIN_URL + "images/lightbox/closelabel.gif";

- in page/html/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

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>

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/translate.js</script></action>
  3. <action method="addJs"><script>mage/cookies.js</script></action>
  4. <action method="addJs"><script>lightbox/lightbox.js</script></action>
  5. <action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>
  6. <action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
  7. <action method="addCss"><stylesheet>css/boxes.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




 

Explore the Wiki

Magento Developer Certification

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs