Installation

Lightbox Extension

The lightbox extension will enhance your product preview by displaying images in a pop-up within the page. By default, Magento's product preview opens a pop-up in a new window which may cause problems for those using pop-up blockers and can also interrupt the shopping experience. The lightbox is full of smooth transitions making skimming through product previews a breeze. This extension is light weight, easy to use, compatible with all browsers, and takes only a few minutes to implement. Follow these instructions for use on an installation of Magento 1.4.x

Part I: Upload

  1. Upload Lightbox Extension\lightbox2.04\css\lightbox.css to /skin/frontend/default/yourskin/css/

  2. Upload Lightbox Extension\lightbox2.04\js\lightbox.js to /skin/frontend/default/yourskin/js/

  3. Upload Lightbox Extension\lightbox2.04\images to /skin/frontend/default/yourskin/images/

Part II: Editing

Important Note: If you are asked to edit an app file that is not included in your template, go to /app/design/frontend/base/default/ and locate the necessary files, copy the files into the appropriate directory in your template folder, and then continue editing.

Also, the code you are asked to "find" is taken from default Magento templates and may not match your template exactly if the code has been customized. If you find code in your template that matches 90%, that's probably what you're looking for.

  1. Open: /app/design/frontend/default/yourskin/template/page/html/head.phtml

  2. Find & Replace


    Find:

    <script type="text/javascript">
//<![CDATA[
    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>

  3. Open, Find, and Add


    Open: /app/design/frontend/default/yourskin/layout/page.xml


    Find:

    <action method="addJs"><script>mage/cookies.js</script></action>

    After Add:

    <action method="addItem"><type>skin_js</type><name>js/lightbox.js</name></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>

  4. Open, Find, and Replace


    Open: /app/design/frontend/default/yourskin/template/catalog/product/view/media.phtml


    Find:

    <?php foreach ($this->getGalleryImages() as $_image): ?>
  <li>
		<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
  </li>
<?php endforeach; ?>

    Replace With:

    <?php foreach ($this->getGalleryImages() as $_image): ?>
 <li>
  <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"
  rel="lightbox[rotation]" title="<?php echo $_product->getName();?>">
     <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail',
     $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/>
  </a>
 </li>
<?php endforeach; ?>

Part III: Clearing Cache

  1. Go to System > Cache Management

  2. For All Cache drop-down, select 'Refresh.' Enable everything from Configuration to Web Services Configuration.

  3. When you're finished, click on "Save cache settings."

  4. Congratulations, you're finished installing.