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

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

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

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

And insert this right 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

css/menu.css

After that, insert this:

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:

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

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

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

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!