How to close colorbox after clicking a link within the iframe [#2101003]

Hi,

I'm really stuck trying to make links in a colorbox (iframe) open in the _parent or _top window, and make the colorbox close.

Let me explain :

I created a view page listing the user being displayed relationships (mysite/followers/%). The page uses a different theme than the global site theme (using themekey module, switch based on the page's path) so that I can apply specific CSS for that page.

On the user's profile, there's a custom block with a link to the page using colorbox-load and iframe (so that I can get my alternate theme for this page).

So far, so good, the page opens in a colorbox with the requested theme, and the list of relationships shows perfectly.

BUT

when clicked, the links in the view (usernames linked to profile basically) open within the iframe and the colorbox doesn't close. I'd like to make those links to get the visitors to the user profile page outside the iframe, in the parent window, and automatically close the colorbox.

I know that not using iframe in colorbox would work in my case. Issue is that then, the page opens with the wrong theme/css and is displayed fully (with headers, sidebars, etc.) which I don't want to.

I tried everything for the links in the view, rewriting the output in Views, e.g. target="_parent/_top", onclick="parent.$.fn.colorbox.close();. Nothing worked so far.

I read that the parent.$.fn.colorbox.close(); could work somehow, somewhere else but I really don't know where to put this piece of code, whether in the theme template, the views template, the colorbox.js, etc.

Help or advice would be much appreciated.

Thanks.

Comments

Comment #1

butteryak CreditAttribution: butteryak commented 17 March 2014 at 23:33

did you ever figure out how to do this, i'm attempting to do the very same thing.

Comment #2

butteryak CreditAttribution: butteryak commented 19 March 2014 at 01:57

since I had a custom template for what I was viewing is was able to add a tag, which took care of it. such as

Comment #3

inky@inky3d.com CreditAttribution: inky@inky3d.com commented 14 October 2014 at 12:18

I found this worked for me:

<a onclick="parent.$.fn.colorbox.close();" href="NEW SITE" target="_top">open in parent window with animation</a>

Picked it up here: http://www.freepx.net/blog/colorbox-how-to-quit-iframe-when-clicking-on-...

Comment #4

JayVGee CreditAttribution: JayVGee commented 26 January 2015 at 18:46

Great find, thanks! Solution worked for me. FYI, I was using the splashify module in conjunction with colorbox.

Comment #5

chris.jichen CreditAttribution: chris.jichen commented 23 February 2015 at 04:23

#3 doesn't work for me somehow. i have to alter a bit:

<a onclick="parent.jQuery.fn.colorbox.close();return false;" href="" target="_top">Close the colorbox</a>

The solution i took in order to make it automatically close the colorbox:
1. create the page in hook_menu

 $items["yourmodule/colorbox/close"] = array(
    "title" => "colorbox close page",
    "description" => "Close the colorbox dialog",
    "page callback" => "yourmodule_colorbox_close",
    "page arguments" => array(),
    "access arguments" => array("access content"),
  );

2. add the callback

function yourmodule_colorbox_close() {
  drupal_add_js('jQuery(document).ready(function () { parent.jQuery.fn.colorbox.close();});', 'inline');
  $output = '<a onclick="parent.jQuery.fn.colorbox.close();return false;" href="" target="_top">Close the colorbox</a>';
  return $output;  
}

3. then you can use drupal_goto("yourmodule/colorbox/close"); anywhere you want.