|
Updated instructions for Lightbox.
Instead of changing .phtml files we can simply use xml techniques.
Step A. Download Lightbox from http://www.huddletogether.com/projects/lightbox/
Step B. Copy lightbox.js and effects.js to js\varien directory where ale .js are located and lightbox.css to skin/frontend/default/default/css/lightbox.css
Step C. Add 3 lines to app/design/frontend/default/default/layout/catalog/product/view.xml so the reference for head looks like below
Because in forum there are script tags stripped from code. Use a normal script tag < script > (without spaces) and close it < / script > where it’s necessary (marked by ! )
<reference name="head">
<action method="addJs">!script!varien/effects.js!/script!</action>
<action method="addJs">!script!varien/lightbox.js!/script!</action>
<action method="addJs">!script!varien/product.js!/script!</action>
<action method="addCss"><link>lightbox.css</link></action>
</reference>
Step D. The next step is changing the app/design/frontend/default/default/template/catalog/product/view.phtml
From
<?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;?>
Step E. Simple change to lightbox.css to set proper display over zoom-box
In lightbox.css change z-index to 10010 in
#lightbox{
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
That’s all
|
ready : 
