Adding Lightbox to Magento

For the version 1.0 or newer use the new wiki tutorial at http://www.magentocommerce.com/wiki/adding_lightbox_to_magento_v2

Step A. Download Lightbox from http://www.huddletogether.com/projects/lightbox/

Step B. Copy lightbox.js and effects.js to jsvarien directory where all .js are located.

Step C. Open 2columns-right.phtml in /app/design/frontend/default/default/template/page and add 2 lines.

after

  1. <?=$this->getJsUrl()?>varien/menu.js">

add

  1. <?=$this->getJsUrl()?>varien/lightbox.js">    <?=$this->getJsUrl()?>varien/effects.js" >

and then we must add css to our page layout. We make this very simple by adding

  1. <link rel="stylesheet" href="<?=$this->getSkinUrl('css/styles.css')?>" type="text/css" media="all"/>

after

  1. <link rel="stylesheet" href="<?=$this->getSkinUrl('css/lightbox.css')?>" type="text/css" media="screen"/>

Step D. The last step is changing the

  1. <?foreach ($this->getGalleryImages() as $_image):?>
  2.                     <li>
  3.                         <a href="#" onclick="popWin('<?=$this->getGalleryUrl($_image)?>', 'gallery', 'scrollbars=yes,width=300,height=300,resizable=yes');return false;">
  4.                             <img src="<?=$_image->setType(1)->getSourceUrl();?>" width="68" height="68" alt=""/>
  5.                         </a>
  6.                     </li>
  7.                 <?endforeach;?>

to

  1. <?foreach ($this->getGalleryImages() as $_image):?>
  2.                     <li>
  3.                         <a href="<?=$_image->setType(0)->getSourceUrl();?>" rel="lightbox[roadtrip]" title="">
  4.                             <img src="<?=$_image->setType(1)->getSourceUrl();?>" width="68" height="68" alt=""/>
  5.                         </a>
  6.                     </li>
  7.                 <?endforeach;?>

in app/design/frontend/default/default/template/catalog/product/view.phtml

Working example on http://demo.lento.pl/catalog/product/view/s/coalesce-functioning-on-impatience-t-shirt/id/119/category/4/

I haven’t found a way to show lightbox over zoom div. This is probably set in css so I must look further.