Yesterday I was trying to implement a Shadowbox contact form in the Bay of Islands SPCA site, but I just couldn’t get it to work. I was using the standard setup that works perfectly well on the Te Kuiti SPCA Site:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript" src="http://tekuitispca.org/sb/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="http://tekuitispca.org/sb/shadowbox-jquery.js"></script>
<script type="text/javascript" src="http://tekuitispca.org/sb/shadowbox.js"></script>
<script type="text/javascript">
 
Shadowbox.loadSkin('classic', 'http://tekuitispca.org/sb/skin');
Shadowbox.loadLanguage('en', 'http://tekuitispca.org/sb/lang');
Shadowbox.loadPlayer(['iframe'], 'http://tekuitispca.org/sb/player');
 
window.onload = function(){
 
    var options = {
        initialWidth:     '0',
        initialHeight:    '0'
    };
 
    Shadowbox.init(options);
    }
 
</script>

And the HTML:

<a href="http://www.tekuitivets.co.nz/" rel="shadowbox;initialHeight=0;initialWidth=0;width=900;height=700;" title="Atkinson &amp; Associates Vet Clinic">Atkinson &amp Associates Vet Clinic</a>

I uploaded all the files, changed the addresses in the above code. Strangely, it worked find in Rapid Weaver, but not in Safari, Firefox, Epiphany or any other browser – either in export mode or after a full upload. My search for “Shadowbox just won’t work!” yielded no results, so was forced to use the programmer’s final weapon – exhaustive trial and error.

I tried various things for about an hour, and finally struck gold with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script type="text/javascript" src="http://boispca.org/sb/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://boispca.org/sb/shadowbox-jquery.js"></script>
<script type="text/javascript" src="http://boispca.org/sb/shadowbox.js"></script>
<script type="text/javascript">
 
	Shadowbox.loadSkin('classic', 'http://boispca.org/sb/skin');
	Shadowbox.loadLanguage('en', 'http://boispca.org/sb/lang');
	Shadowbox.loadPlayer(['iframe'], 'http://boispca.org/sb/player');
 
	jQuery(document).ready(function(){
 
		var options = {
		initialWidth:     '0',
		initialHeight:    '0'
		};
 
		Shadowbox.init(options);
 
		jQuery("#contact-us").click(function(){
			Shadowbox.open({
			        player:     'iframe',
			        title:      'Contact Us',
			        content:    'http://boispca.org/contact/',
			        height:     500,
			        width:      400
			    });
		    return false;
		});
	});
 
</script>

And HTML:

<a href="http://boispca.org/contact/" id="contact-us" title="Contact" >Contact</a>

Now whenever one clicks the contact button, Shadowbox is called through jQuery.

I don’t know why the normal way didn’t work!

Scroll to top

Related posts:

1. Scroll to Anchors With jQuery This post will introduce and explain the "scroll to anchor" method I have used throughout this site. For a demo, click "scroll to Comments", which you'll find above....
2. jQuery Error: ‘g is undefined’ Scroll to comments Discovered the cause of this annoying (but seemingly impotent) error in a response by Karl Swedberg on Nabble. The error was caused by my passing only one function to jQuery.hover(), eg: jQuery(".blog-entry-date").hover(function(){ jQuery(this).animate({color: genHex()},100); [...]...
3. Using PNG Transparency + the jQuery Colour Change Plugin A tutorial describing how to achieve the "colour change on roll-over" effect used in this site's RSS and Twitter links in the sidebar....
4. Fancy Footer So I created a PHP script that is included in the "Prefix" of my blog pages. It consists of one function that is passed a few pieces of information, and spits out a nicely formatted footer section....
5. JS-Kit Comments + Greybox on Any Page I realised that I didn’t want comments to be visible on the page in case one set of photos became wildly popular (yeah, right); which would result in a page of comments with a few photos, instead of a page of photos with maybe one or two comments. For some reason, Greybox popped into my head, and wouldn’t leave. A...

Tags: Fix, jQuery, Rapidweaver, Shadowbox