Shadowbox + FoxyCart

Shadowbox is pretty slick, and can be used instead of the default Thickbox based FoxyBox quite easily. PLEASE DON'T USE THIS unless you have a decent handle on javascript and are willing to try something that's currently unsupported and feature incomplete. It DOES NOT WORK WITH FORMS, only links at this point.

Setting Up Shadowbox

NOTE: Below describes how to apply Shadowbox for LINKS but not forms.

First, make sure you remove any foxybox.css or theme.foxybox.css files you might have called in your <head> section.
Download Shadowbox: http://mjijackson.com/shadowbox/. Stick it somewhere on your server that makes sense, like /assets/js/shadowbox/

Add the necessary Shadowbox file calls to your <head> section, probably something like this:

	<link rel="stylesheet" type="text/css" href="shadowbox/build/css/shadowbox.css" />
	<script src="shadowbox/build/js/adapter/shadowbox-jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="shadowbox/build/js/shadowbox.js" type="text/javascript" charset="utf-8"></script>

Next let's add a script tag to the <head> section, below your foxycart_includes.js call. Make sure you read the comments so you know what's going on:

<script type="text/javascript" charset="utf-8">
	$j(document).ready(function(){
		// Un-bind the onclick action, which is part of the foxycart_includes.js file by default.
		// You can set the width and height of the shadowbox here.
		$j('a.foxycart').unbind('click').attr('rel','shadowbox;height=400;width=560');
		// Shadowbox seems to set the href when it's initialized, so we'll need to append
		// session IDs to all .foxycart links prior to initializing it.
		// This only happens if cookies are accepted but 3rd party cookies are denied.
		if (typeof(fc_CookieFix) == "function") { 
			fc_CookieFix();
		}
		// Initialize Shadowbox
		Shadowbox.init();
	});
</script>

If you're in the habit of assigning astronomical z-index values, you may want to throw in an override after that:

<style type="text/css" media="screen">
	#shadowbox_overlay {
	  z-index: 998000;
	}
	#shadowbox_container {
	  z-index: 999000;
	}
</style>

Test. If the loading image isn't showing up, you'll need to open shadowbox.js and edit line 3 where it asks for the loading image:
```
options={assetURL:"",loadingImage:"http://www.YOURDOMAIN.com/images/loading.gif",
```

Shadowbox + FoxyCart

Setting Up Shadowbox

Page Tools

Site Tools

User Tools