Home/ Questions/Q 8957393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T14:58:48+00:00

I’ve managed to successfully implement the jQuery colorbox plugin into a web application. But

  • 0

I’ve managed to successfully implement the jQuery colorbox plugin into a web application. But I still have the following problem: I cannot get jQuery colorbox to resize when a new page is opened in the iframe?

The scenario:

  1. User visits the home page.
  2. User clicks on a link(on the same domain) and jQuery colorbox opens with an iframe on a big page.
  3. User clicks on a link(on the same domain) and the iframe navigates to a smaller page.

When the iframe navigates to a smaller page I need to resize the colorbox, but how?

What I’ve tried so far:

I figured that in the <head> section of the smaller page I could put some code to resize the colorbox. The code is executed inside a $(document).ready() function.

  • $.colorbox.resize();
  • $.fn.colorbox.resize();
  • $(".iframe").colorbox.resize();

But all of that didn’t work. However, if I pass the $.colorbox.resize(); command in the Firebug console after the page is fully loaded inside the iframe, the resize function executes successfully.

Good to know:

I know that there are a lot of questions asked on how to resize the colorbox, but I didn’t find any questions involving iframes that solved my problem. If you need any extra code or screenshots to help solve my issue, just ask.

Thanks for setting me in the right direction.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I finally fixed it, Because of the iframe in needed to make my own resize function in the parent window.

    window.customResize = function(){ 
    $(".iframe").colorbox.resize({width:"960px", height:"675px"});
};

    This ment that in the iframe i could call the following command:

    window.parent.customResize();

    And then it works.

    • 0