====== Adding Shadowbox to Magento ======

Here is a tutorial on how to add the [[http://mjijackson.com/shadowbox/#demos|Shadowbox]] modal box to your Magento powered online store. 

Magento Wiki offers the help of [[http://www.magentocommerce.com/wiki/adding_lightbox_to_magento_v2|adding Lightbox2 to your Magento]] install, for those not interested in the Shadowbox Modal.

==== Step 01 - Upload Shadowbox ====

[[http://mjijackson.com/shadowbox/#download|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

<code>yourdomain.com/js</code>

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

 <code>yourdomain.com/js/sb</code>

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

<code>yourdomain.com/js/sb/build
yourdomain.com/js/sb/images
yourdomain.com/js/sb/src</code>

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

<code>yourdomain.com/skin/frontend/default/default/</code>

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

<code>yourdomain.com/skin/frontend/default/default/css/shadowbox.css</code>

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 

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

==== Step 04 ====

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

<code>yourdomain.com/js/sb/shadowbox.js</code>

Around line 81, lets replace

<code>
loadingImage:       'images/loading.gif',</code> 
with 
<code>
loadingImage:  SKIN_URL + 'images/sb/loading.gif',
</code>

And around line 131 lets replace

<code>
overlayBgImage:    'images/sb/overlay-85.png',</code> 
with 
<code>
overlayBgImage:    SKIN_URL + 'images/sb/overlay-85.png',
</code>

==== Step 05 ====

Now lets modify the Magento template files and set them to use Shadowbox. Open up 
<code>yourdomain.com/app/design/frontend/default/default/layout/page.xml</code>

Around line 42, look for 

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

And insert this after 

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

Scroll down around line 49 and look for 
<code>
<action method="addCss"><stylesheet>css/menu.css</stylesheet></action>
</code>

After that, insert this: 
<code>
<action method="addCss"><stylesheet>css/shadowbox.css</stylesheet></action>
</code> Save and close.

Now lets open up <code>yourdomain.com/app/design/frontend/default/default/template/catalog/product/view/media.phtml </code>

Around line 51 find this code:

<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; ?>
</code>

And replace it with this:

<code>
<?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; ?>
</code>

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 <code>yourdomain.com/app/design/frontend/default/default/template/page/html/head.phtml </code>

Lets replace

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

With this

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

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 [[http://c.hadcoleman.com/2008/06/adding-shadowbox-to-magento-ecommerce|at my place]].