Adding Shadowbox to Magento Ecommerce

Here is a tutorial on how to add the Shadowbox modal box to your Magento powered online store. For those unfamiliar with Magento, it is the latest and greatest in open-source eCommerce software. Varian has done the online communi-tay a great service by building a shopcart the right way, from the ground up. Thanks Varian! Granted, Magento has a strong learning curve, so those unfamiliar with basic HTML, CSS, or hacking at code… beware.

Parlez-vous français? Voici une traduction Google.

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

Step 01

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

Shadowbox has been recently upgraded and restructured. This tutorial used the previous Shadowbox version structure. I’ve compiled Shadowbox how it used to be and created the proper directory structure as well. Please use this download link for your Shadowbox files.

Shadowbox for Magento.

As you are using this tutorial to add Shadowbox to a site that obviously is for commercial purposes, you’ll need to buy the Shadowbox Commercial License for $20.

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

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:

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

So now, you should have the CSS file named shadowbox.css 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.

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

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

Step 04

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

yourdomain.com/js/sb/src/js/shadowbox.js

Around line 81, lets replace

1

loadingImage:       'images/loading.gif',

with

1

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

And around line 131 lets replace

1

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

with

1

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 yourdomain.com/app/design/frontend/default/default/layout/page.xml

Around line 42, look for

1

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

And insert this right after

1
2
3

<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

1

css/menu.css

After that, insert this:

1

css/shadowbox.css

Save and close.

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

In version 1.0 (1.1.1 below)
Around line 51 find this code:

1
2
3
4
5

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

1
2
3
4
5

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

version 1.1.1

Around line 51, replace this:

51
52
53

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

with this:

51
52
53

    <?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="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></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

1
2
3
4

<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

1
2
3
4
5
6
7
8
9
10

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

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

And don’t forget to tip the man for his Shadowbox work!

Tagged with ecommerce, magento, shadowbox, Tricks, tutorials

Was this Tutorial or Trick helpful? Please consider a small contribution.

Pypal Tip

Amount (US$) :

PayPal takes $0.35 commission for a $1 donation. Please enter at least $1.35 , thank you! Please enter the amount you wish to donate and try again.  Transferring to PayPal, please wait...

Contact ChadChad Coleman

Chad has been building websites for friends, family and small businesses for the past 8 years. He currently lives and works in Coeur d'Alene, Idaho. Feel free to contact him regarding any design, web or development work.

67 Responses to “Adding Shadowbox to Magento Ecommerce”

1. Gaz says:

   April 1, 2009 at 2:41 pm

   Thanks for the great tutorial. Works well with Magento ver. 1.2.1.2.

   Just wondering if anyone can solve this issue: I’m also wanting to use some javascript which adds a selected state to the nav but it conficts with Shadowbox so that it doesn’t function.

   The js is:

   function setActive() {
   aObj = document.getElementById(’leftCol’).getElementsByTagName(’a');
   for(i=0;i=0) {
   aObj[i].className=’selected’;
   }
   }
   }

   window.onload = setActive;

   Any help greatly appreciated.

   Reply
2. Gaz says:

   April 5, 2009 at 3:06 pm

   Ok. Worked it out.

   Incase anyone else needs to know, Shadowbox is initiated using window.onload and so was my other javascript so they conflicted. You need to add them to the same function so that there is only one window.onload. Changed head.phtml script to:

   window.onload = initAll;

   function initAll(){
   Shadowbox.init();
   setActive();
   }

   Reply
3. Dreamweaver Syntax Highlight Tip - Chad Coleman says:

   April 11, 2009 at 3:10 pm

   [...] editing, and I currently have the pleasure of working with the new Magento Shopcart Software. While adding Shadowbox to the cart, I ran into the small problem of Magento template files that use the rare .phtml file [...]

   Reply
4. Jayesh says:

   April 13, 2009 at 1:34 am

   great work, thank you very much

   Reply
5. funfun says:

   May 17, 2009 at 8:33 am

   Great Work, thank you

   This instruction is for installation of Shadowbox 2

   Shadowbox currently release Shadowbox 3.0b, which is IE8 compatible

   May I know whether there is installation guide for this?

   Thank you

   Reply
   • Joystyle says:

     May 18, 2009 at 1:20 pm

     I’ve found a similar tutorial which is about shadowbox 3.0b here: http://www.swiftcore.com/en/magento/integrate-shadowbox-alternative-lightbox-30b-magento.html
6. Jpaez says:

   June 8, 2009 at 10:00 am

   Thanks Chad for everything.

   I ask you a tutorial on how to create a Magento theme. step by step.

   and what are the tools and software that your suguieres.

   I hope it is possible for you.

   Thanks4All

   Reply