Shadowbox rel=’shadowbox’ Doesn’t Work? Here’s a Workaround

By Michael Robinson on March 11, 2009, Filed in: Fix | jQuery | Rapidweaver | RW Tutorial | Tutorial
×

This post was originally published in 2009
It may contain stale & outdated information. Or it may have grown more awesome with age, like the author.

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!

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’ 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(),...

Tags: , , ,

No comments | Trackback

«

»