1

I'm trying to open a google calendar using a lightbox. I've seen it done on another webpage using Colorbox (here: http://www.orovalleybicycle.com/ click on 'Expand to full calendar' on the righthand side), but when I tried to implement something really similar (also using colorbox) the calendar is refusing to open inside a colorbox. When I click on my hyperlink that SHOULD trigger colorbox it just navigates away from my page and opens the google calendar URL directly.

So basically, here is the relevant bits of my code... I've tried wherever possible to duplicate what's on the demo page ( http://www.jacklmoore.com/colorbox/example1/) so that i know it SHOULD work (except where you see relative URLs i have actually used absolute ones, changed for security & simplifiaction):

In my <head> tags:

<link rel="stylesheet" href="colorbox/colorbox.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>

<script>
    $(document).ready(function(){
        $(".colorboxcal").colorbox({iframe:true, width:"80%", height:"80%", transition:"fade"});
    });
    </script>

In the body:

<a class="colorboxcal" href="https://www.google.com">Open Full Calendar</a>

But basically, it behaves as if it just says this:

<a href="https://www.google.com">Open Full Calendar</a>

I've tried the following things to work out what was causing the problem:

  • checked the absolute paths are correct
  • tried changing the reference for jquery.min to a copy on my local machine, and tried different versions (made no difference)
  • tried changing the 'href' to direct to an image on my pc (result: clicking the link opened the image in the brower window, so same old problem)
  • moving the href attribute up into the <script> code at the top (result: clicking the link did nothing. wrong cursor dispayed and doesn't behave like a link, just text.)
  • putting the same code in a test page with nothing else but the bare essentials (result: clicking on link opened the URL, so same old issue.)
  • tried removing all attributes that override .colorbox default ones except width & height (result: same old issue)
  • tried removing the ready(function() stuff and placing the <script> code just under the </a> tags where it is needed (result: same old issue)

I would love to check whether the colorbox is actually being triggered or loaded at all, but I can't figure out how.

I've checked and my page validates nicely as xhtml (using w3 and using dreamweaver), so I dont think i've got any silly unclosed tags or anything causing problems. But it might possibly be something equally obvious that I've overlooked! I'm using php to call header & footer & navigation, and I have an image "slider" elsewhere on the site that uses javascript and jquery and its working fine. I've tried veiwing it (locally hosted) in firefox and chrome but the results are the same in both, so I don't think its related to a brower issue. My php is being errr... parsed (? whats the correct term there?) by xampp lite, but i googled and cant find any expected conficts there.

i started building this site as a complete novice to html, php, javascript, jquery - the lot, so apologies if you clever souls need to dumb-down your response... I'm an absolute noob and my head is swimming! But does anyone (please!) have any suggestions as to why the colorbox doesnt work??? Thankyou in advance!!

a_minnie
  • 11
  • 3
  • Post the webpage with the actual problem. – Blender Sep 14 '12 at 03:07
  • its only on my local machine, not on the www yet, so sorry, i cant... – a_minnie Sep 14 '12 at 03:08
  • Host it on your test site. It's useless to debug something that you can't actually see. – Blender Sep 14 '12 at 03:09
  • I'm building it for someone else, so they're sorting out the hosting side of things, so no test site as yet. Sorry. Not sure what info you need from the rest of the code that I haven't given you? It was all workign beautifully until i put this in and the rest continues to work while the colorbox still doesnt. its a pretty simple site. – a_minnie Sep 14 '12 at 03:43

1 Answers1

1

Some sites do not allow you to display them in an iframe, www.google.com being one of them.

Jack
  • 9,448
  • 3
  • 29
  • 33
  • ahh! so does that mean... A) I cant embed anything from google including my calendar - i'm not really embedding google.com its google.com/calendar/embed?src=username,etc,etc (and if thats the case, how on earth did the other guy do it - its right there in his code and looks simple enough) OR B) can i embed it if i DONT use an iframe? – a_minnie Sep 14 '12 at 22:47
  • I was just commenting for www.google.com specifically. I don't have experience using their calendar, but if they don't allow iframing then they would provide some alternative way of embedding. It looks like the other guy is using an URL that exists specifically for embedding: https://www.google.com/calendar/embed?src=xxxx – Jack Sep 14 '12 at 23:07
  • yep, thats what I'm using too, the google calendar link that they provide for embedding. Problem is, I'm not even getting the colorbox appearing with a failed google calendar in it. the link is skipping the colorbox altogether and just taking me directly to the URL for the google calendar... does that make sense? Thats what's making me think that I've got something awry with my colorbox setup or coding. – a_minnie Sep 15 '12 at 00:16
  • i also couldnt get colorbox to work making an image appear on a page with nothing else on it. So i must have a colorbox-related problem – a_minnie Sep 15 '12 at 00:24
  • What you've posted looks fine. You should check your browser's console to see if you have any JS errors. – Jack Sep 15 '12 at 01:11
  • ok, so checked the console, and it says: [11:32:15.262] TypeError: $(".colorboxcal").colorbox is not a function @ http://localhost/TCCphp/calendar/upcoming.php:28 – a_minnie Sep 15 '12 at 01:34
  • hmmm, googled it and I'm not finding much success. Does that error code mean anything to you? colorboxcal is my class I've given to the `` to use to trigger the colorbox – a_minnie Sep 15 '12 at 01:49
  • Solved! I was looking into the console error more and found this: http://stackoverflow.com/questions/3931529/is-not-a-function-jquery-error and even though I'm not using wordpress I thought I would see if i have any noConflict issues. I deleted the other jquery-based thing ('Anything Slider') that i have code for in my `` and hey presto! colorbox works! thanks for your patience and your suggestions! colorbox looks great :-) – a_minnie Sep 15 '12 at 03:12