Prototype: Trying to use Shadowbox with Prototype + Scriptaculous

pollyplummer · 05-30-2008, 11:51 PM

Help! Does anyone have experience using Shadowbox.js with Prototype? Here is what I'm trying to get to work:
http://mjijackson.com/shadowbox/
I'm using it inside of an accordion that works with prototype and effects.js. The accordion requires a slightly older version of prototype and it is working just fine. The shadowbox does not work, even if I used the latest releases. I get the same error. Maybe I am not using the right init? Or something is wrong that I've overlooked? Basically the shadowbox fails to load- it tries to but then I get this error:

Stack Overflow at Line 1603 then it takes me to the target image instead of loading in the shadowbox.

Here is what my document looks like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/shadowbox-prototype.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>


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

<script type="text/javascript">
			
		//
		//  Load them onload
		// 
		Event.observe(window, 'load', loadAccordions, false);
	
		//
		//	Set up all accordions
		//
		function loadAccordions() {
			var verticalAccordion = new accordion('vertical_container', {
				classNames : {
					toggle : 'vertical_accordion_toggle',
					toggleActive : 

'vertical_accordion_toggle_active',
					content : 'vertical_accordion_content'
				},
				defaultSize : {
					width : 880
				},
				direction : 'vertical'
			});
			
			
			// Open first one
			verticalAccordion.activate($$('#vertical_container 

.accordion_toggle')[0]);
		
			// Open second one
			verticalAccordion.activate($$('#vertical_container 

.vertical_accordion_toggle')[2]);
		}	
		
		
	</script>

Any help or suggestions would be greatly appreciated! I'm on a deadline and I'm pretty much freaking out cause I've spent nearly all day on this.