Magento

Here is a tutorial on how to add the Shadowbox modal box to your Magento powered online store.

Magento Wiki offers the help of adding Lightbox2 to your Magento install, for those not interested in the Shadowbox Modal.

Download Shadowbox. Go with the second download option. Just the files necessary to run shadowbox.

Assuming that magento is installed in your root directory (yourdomain.com) -

From the root open the /js directory

yourdomain.com/js

Inside of the /js directory create a new directory named “sb” which is short for shadowbox

yourdomain.com/js/sb

Inside of /sb lets upload the 3 shadowbox directories /build, /images, and /src. So now on the server we should have:

yourdomain.com/js/sb/build
yourdomain.com/js/sb/images
yourdomain.com/js/sb/src

Lets open your template directory and drop in the CSS file that comes with Shadowbox.

This tutorial will make use of the default template. So if you are not using the default template, you’ll need to exchange the default template name for your own template directory name.

The default template can be found here:

yourdomain.com/skin/frontend/default/default/

So now, you should have the CSS file named <em>shadowbox.css</em> in this directory:

yourdomain.com/skin/frontend/default/default/css/shadowbox.css

The Shadowbox CSS file can be found in /build/css/ of the shadowbox zip file that you downloaded.

Lets open your template directory and drop in the images used by Shadowbox. Open your default template, open the images directory, and create a new directory named “sb”. Drop in the images that are found in the images directory of the Shadowbox download. So now you should have

yourdomain.com/skin/frontend/default/default/images/sb/loading.gif
yourdomain.com/skin/frontend/default/default/images/sb/loading-light.gif
yourdomain.com/skin/frontend/default/default/images/sb/overlay-85.png

Now we need to modify the Shadowbox Javascript. Open up the javascript found at:

yourdomain.com/js/sb/shadowbox.js

Around line 81, lets replace

loadingImage:       'images/loading.gif',

with

loadingImage:  SKIN_URL + 'images/sb/loading.gif',

And around line 131 lets replace

overlayBgImage:    'images/sb/overlay-85.png',

with

overlayBgImage:    SKIN_URL + 'images/sb/overlay-85.png',

Now lets modify the Magento template files and set them to use Shadowbox. Open up

yourdomain.com/app/design/frontend/default/default/layout/page.xml

Around line 42, look for

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

And insert this after

<action method="addJs"><script>sb/src/js/lib/yui-utilities.js</script></action>
<action method="addJs"><script>sb/src/js/adapter/shadowbox-prototype.js</script></action>
<action method="addJs"><script>sb/src/js/shadowbox.js</script></action>

Scroll down around line 49 and look for

<action method="addCss"><stylesheet>css/menu.css</stylesheet></action>

After that, insert this:

<action method="addCss"><stylesheet>css/shadowbox.css</stylesheet></action>

Save and close.

Now lets open up

yourdomain.com/app/design/frontend/default/default/template/catalog/product/view/media.phtml 

Around line 51 find this code:

<?php foreach ($this->getGalleryImages() as $_image): ?>
         <li>
           <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" 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; ?>

And replace it with this:

<?php foreach ($this->getGalleryImages() as $_image): ?>
         <li>
           <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="shadowbox[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; ?>

This just adds the rel=”shadowbox[rotation]” call to the anchor tag, to let shadowbox know that we are summoning its powers. Save and close.

Now lets open the file

yourdomain.com/app/design/frontend/default/default/template/page/html/head.phtml 

Lets replace

<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') ?>'; 
</script> 

With this

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

<!-- Added Shadowbox -->
<script type="text/javascript">
window.onload = function(){ Shadowbox.init(); };
</script>
<!-- end Added Shadowbox -->

Save and close.

And now shadowbox should be fully functional for your product images. If you run into any problems, feel free to post questions or comments at my place.