Adding Shadowbox to Magento

Last modified by seudo? on Thu, June 24, 2010 16:43
Source|Old Revisions  

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.

Step 01 - Upload Shadowbox

NOTE: This tutorial only works for shadowbox 2, for shadowbox 3 you should read this tutorial: Integrate shadowbox 3 tutorial.

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

Assuming that magento is installed in your root directory ( -

From the root open the /js directory

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

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

Step 02

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:

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

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

Step 03

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

Step 04

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

Around line 81, lets replace

loadingImage:       'images/loading.gif',


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

And around line 131 lets replace

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


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

Step 05

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

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 

Around line 51 find this code:

<?php foreach ($this->getGalleryImages() as $_image): ?>
           <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>
      <?php endforeach; ?>

And replace it with this:

<?php foreach ($this->getGalleryImages() as $_image): ?>
           <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>
      <?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 

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

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

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

Save and close.

Enjoy The Fruits

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.

Known Issues

Version 3.0

There are issues with IE6 and IE7.

  • IE6 - conflicts with Magento’s standard top category menu system
    • Level 0 will show but all other levels will not on hover.
  • IE7 - conflicts with Bundle products throwing the infamous Operation Aborted
    • A work around is not load shadowbox for this type of product.