=====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

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

add

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

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

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

after

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


**Step D.** The last step is changing the

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

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

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.