Adding Lightbox to Magento
Adding Lightbox to Magento |
Step A. Download Lightbox from http://www.huddletogether.com/projects/lightbox/
Step B. Copy lightbox.js and effects.js to js\varien 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
- <?=$this->getJsUrl()?>varien/menu.js">
add
- <?=$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
- <link rel="stylesheet" href="<?=$this->getSkinUrl('css/styles.css')?>" type="text/css" media="all"/>
after
- <link rel="stylesheet" href="<?=$this->getSkinUrl('css/lightbox.css')?>" type="text/css" media="screen"/>
Step D. The last step is changing the
- <?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;?>
to
- <?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;?>
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.
