Shadowbox rel=’shadowbox’ Doesn’t Work? Here’s a Workaround
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 & Associates Vet Clinic">Atkinson & 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!
Like this post? Move it on along with:
Email |
delicious |
Digg |
Tweet |
Reddit |
Newsvine |
Furl |
Google |
Stumble |
HaoHao
| Trackback: |
Related posts:
- 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....
- 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); [...]...
- 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....
- 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....
- 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...





























Recent Comments
Arrived In Shanghai
Done, look left!
Sun, 03 Jan 2010 15:37:03 +0000
Arrived In Shanghai
Hi :)
I'll see what I can do!
Sun, 03 Jan 2010 14:23:07 +0000
Arrived In Shanghai
Hi Mike. It would be very useful to have the time date and weather conditions in Shanghai, on your site. Be seeing you soon. Love NZMum.
Sat, 02 Jan 2010 23:30:41 +0000
Js Kit Comments Correct Usage Of The Permalink And Path Attributes
I think it could be better
Thu, 31 Dec 2009 09:01:44 +0000